javascript - 使用PHP更改某些页面内容

Question

我的网站需要帮助 http://clubs.dundaah.com ，它有一个滑出式菜单，其中列出了城市中的俱乐部。我正在寻找的是当一个俱乐部被点击时它应该显示该俱乐部的信息和 gmap 位置的代码，而不改变当前的 HTML 文档。 这是俱乐部菜单

<div class="slideout-menu">
	<h3>More Clubs <a href="#" class="slideout-menu-toggle">&times;</a></h3>
	<ul>
		<li><a href="#">Aqua Blu Club  <i class="fa fa-angle-right"></i></a></li>
		<li><a href="#">Bachus Lounge<i class="fa fa-angle-right"></i></a></li>
		<li><a href="#">Choices<i class="fa fa-angle-right"></i></a></li>
		<li><a href="#">Fahreheit <i class="fa fa-angle-right"></i></a></li>
		<li><a href="#">Hypnotica  <i class="fa fa-angle-right"></i></a></li>

	</ul>
</div>

这是我想在点击上面的俱乐部后更改的 div，

<div id="three-column">
			<div class="tbox1">
				<div class="box"> 
				<img draggable="false" align="middle" src="img/blog/1.png" alt="Dundaah" width="400px" height="200px"><br>
					<div id="onclick1" onClick="openClose('a1')" style="cursor:hand; cursor:pointer;  font-size:14pt"><b>This is Club info</b></div>
					<div id="a1" class="texter">
						   <p><h4>This is the hidden text that was revealed when the header was clicked. Such hidden text is generally
						   related to the main header which opens them. You can add any number of collapsible headers.</h4> </p> 
						   <img draggable="false" align="middle" src="img/blog/1.jpg" alt="Dundaah" width="400px" height="200px">
						   <p><h4>Clicking on the header when the text is seen hides the text. Additionally if a header is clicked it will automatically
						   close any open text related to any other header while opening its own hidden text.</h4></p>
					</div>
				</div>
			</div>
			<div class="tbox2">
			
				<script class="javasth" type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script><div style="overflow:hidden;height:400px;width:450px;"><div id="gmap_canvas" style="height:400px;width:450px;"><img src="img/ajax-loader.gif" /> </div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style><a class="google-map-code" href="http://premium-wordpress-themes.org" id="get-map-data">templates wordpress premium</a></div><script type="text/javascript"> function init_map(){var myOptions = {zoom:14,center:new google.maps.LatLng(40.805478,-73.96522499999998),mapTypeId: google.maps.MapTypeId.ROADMAP};map = new google.maps.Map(document.getElementById("gmap_canvas"), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(40.805478, -73.96522499999998)});infowindow = new google.maps.InfoWindow({content:"<b>The Breslin</b><br/>2880 Broadway<br/> New York" });google.maps.event.addListener(marker, "click", function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script>
			</div>
			
		</div>

这是因为有一个后退按钮，可以在用户登陆 clubs.dundaah.com 网站之前将用户重定向到上一页。 提前致谢。

Answer 1

好的所以首先将选择菜单更改为选择并调整它的大小并更改 css 中的小东西

<select> 
  <option value="" >select..</option>
  <option value="Aqua_Blu" >Aqua Blu Club</option>
  <option value="Bachus" >Bachus Lounge</option>
  <option value="Choices" >Choices</option>
  <option value="Fahreheit" >Fahreheit</option>
  <option value="Hypnotica" >Hypnotica</option>

然后让正确的东西出现而不是你使用这个 JS

 <script type="text/javascript">
        $('.divAquaInfo').hide();
        $('.divBachusInfo').hide();
        $('.divChoicesInfo').hide();
        $('.divFahreheitInfo').hide();
        $('.divHypnoticaInfo').hide();
   $('select[name=deptSelect]').change(function(){
    if ($('select[name=deptSelect]').val() == 'Aqua_Blu'){
        $('.divAquaInfo').show();
        $('.divBachusInfo').hide();
        $('.divChoicesInfo').hide();
        $('.divFahreheitInfo').hide();
        $('.divHypnoticaInfo').hide();

    }
    if ($('select[name=deptSelect]').val() == 'Bachus'){
        $('.divAquaInfo').hide();
        $('.divBachusInfo').show();
        $('.divChoicesInfo').hide();
        $('.divFahreheitInfo').hide();
        $('.divHypnoticaInfo').hide();

    }
            if ($('select[name=deptSelect]').val() == 'Choices'){
        $('.divAquaInfo').hide();
        $('.divBachusInfo').hide();
        $('.divChoicesInfo').show();
        $('.divFahreheitInfo').hide();
        $('.divHypnoticaInfo').hide();

    }
            if ($('select[name=deptSelect]').val() == 'Fahreheit'){
        $('.divAquaInfo').hide();
        $('.divBachusInfo').hide();
        $('.divChoicesInfo').hide();
        $('.divFahreheitInfo').show();
        $('.divHypnoticaInfo').hide();
    }
            if ($('select[name=deptSelect]').val() == 'Hypnotica'){
        $('.divAquaInfo').hide();
        $('.divBachusInfo').hide();
        $('.divChoicesInfo').hide();
        $('.divFahreheitInfo').hide();
        $('.divHypnoticaInfo').show();

      }
  }
  );    
 </script>