Использование PHP для изменения определенного содержимого страницы

Question

Мне нужна помощь на моем сайте http://clubs.dundaah.com, в нем есть выпадающее меню, в котором перечислены клубы города. То, что я ищу, это код для того, когда на него нажимают клуб, он должен отображать информацию о клубе и местоположение gmap без изменения текущего HTML-документа. это меню клуба

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

 
\t </ul> 
 
</div>

это в DIV, что я хочу изменить один раз в клуб щелкнули выше,

<div id="three-column"> 
 
\t \t \t <div class="tbox1"> 
 
\t \t \t \t <div class="box"> 
 
\t \t \t \t <img draggable="false" align="middle" src="img/blog/1.png" alt="Dundaah" width="400px" height="200px"><br> 
 
\t \t \t \t \t <div id="onclick1" onClick="openClose('a1')" style="cursor:hand; cursor:pointer; font-size:14pt"><b>This is Club info</b></div> 
 
\t \t \t \t \t <div id="a1" class="texter"> 
 
\t \t \t \t \t \t <p><h4>This is the hidden text that was revealed when the header was clicked. Such hidden text is generally 
 
\t \t \t \t \t \t related to the main header which opens them. You can add any number of collapsible headers.</h4> </p> 
 
\t \t \t \t \t \t <img draggable="false" align="middle" src="img/blog/1.jpg" alt="Dundaah" width="400px" height="200px"> 
 
\t \t \t \t \t \t <p><h4>Clicking on the header when the text is seen hides the text. Additionally if a header is clicked it will automatically 
 
\t \t \t \t \t \t close any open text related to any other header while opening its own hidden text.</h4></p> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t <div class="tbox2"> 
 
\t \t \t 
 
\t \t \t \t <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> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t </div>

это потому что есть кнопка назад, которая перенаправляет пользователей на предыдущий pa ge, прежде чем они приземлится на сайте 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> 

Answer 2

Вы можете сделать что-то вроде этого просто, чтобы помочь вам. Код не может иметь лучшие практики все-таки я надеюсь, что это поможет вам Использование Ajax для получения данных

<script type="text/javascript" src="jquery-1.3.2.js"> </script> 

<script type="text/javascript"> 

$(document).ready(function() { 

    $("#selector").click(function() {     

     $.ajax({ //create an ajax request to youPhpfile.php 
     type: "GET", 
     url: "yoururl", //your created url    
     dataType: "html", //expect html to be returned     
     success: function(response){      
      $("#yourContent").html(response); 
     } 

    }); 
}); 
}); 
<script> 

Ваш код PHP может быть что-то вроде этого

<?php 
include("connection.php"); //Do create a database commection 

mysql_select_db("yourdbname",$con); 
$result=mysql_query("select * from yourTable",$con); 

echo '<p>' //Just Assuming the html to be say a p tag 

while($data = mysql_fetch_row($result)) 
{ 
    echo "Create your html here "; 
} 

echo "</p>" 

?> 

Для HTML часть позволяет предполагать только ДИВ

<div id="yourContent"> 
//This is where the content will be displayed 
</div>