與jQuery

Question

我創建一個單頁網站application.I切換內容已執行4個列表元素首頁，關於我們，GALLARY，聯繫us.After有四個的div id值，GALLARY，約和接觸

<div id="navigation"> 
<ul id="nav"> 
    <li><a href="#!/home">Home</a></li> 
    <li><a href="#!/about">About us</a></li> 
    <li><a href="#!/gallary">Gallary</a></li> 
    <li><a href="#!/contact">Contact US</a></li> 
</ul> 
</div> 
<div id="home"> 
    <h3 style="text-align:center;">HOME</h3> 
    text of home goes here...... 
</div> 
<div id="about"> 
<h3 style="text-align:center;">ABOUT US</h3> 
Text for about us goes here. 
</div> 
<div id="gallary"> 
<h3 style="text-align:center;">GALLARY</h3> 
<img src="slide1.jpg" width="100%" height="100%"> 
</div> 
<div id="contact"> 
<h3 style="text-align:center;">CONTACT US</h3> 
Phone:xxxxxxxxxx<br> 
Mobile:xxxxxxxxxx<br> 
Email:DD@CC.com<br> 
Fax:xxxxxxxxxx<br> 
</div> 

下面給出了css的詳細信息，最初顯示的是id爲home的div，其他div不顯示。現在

#home 
{ 
width:74%; 
height:16%; 
margin-left:13%; 
border:solid black thin; 
margin-top:2em; 
position:absolute; 
} 
#about 
{ 
width:74%; 
height:16%; 
margin-left:13%; 
border:solid black thin; 
margin-top:2em; 
position:absolute; 
display:none; 
} 
#gallary 
{ 
width:74%; 
height:16%; 
margin-left:13%; 
border:solid black thin; 
margin-top:2em; 
position:absolute; 
display:none; 
} 
#contact 
{ 
width:74%; 
height:16%; 
margin-left:13%; 
border:solid black thin; 
margin-top:2em; 
position:absolute; 
display:none; 
} 

，如果我回家，然後點擊ID爲家的div會顯示同樣的，如果我點擊關於我們在div id爲的就是使顯示與GALLARY和contact.so我想知道我可以做這使用jQuery的效果，如幻燈片淡入淡出等。而且我希望當我按下鍵盤上的退格按鈕或瀏覽器的前面的div應該加載。我嘗試使用更改散列，但我沒有成功。要更好地理解我的問題，你可以看到演示，實際上我想問。 此外，如果有人可以給這個問題jsfiddle。 http://navi.grantcr.com/#!/home

Answer 1

你可以試試這個，

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script type="text/javascript"> 

    $(function(){ 

     $(".navi").click(function(){ 

       $("#home,#about,#gallary,#contact").hide(); 
       var ToNav = $(this).attr('href'); 
       var Link = ToNav.split("#!/"); 
       $("#"+Link[1]).show(); 

     }); 


    }); 
    </script> 


    <div id="navigation"> 
    <ul id="nav"> 
     <li><a href="#!/home" class="navi" >Home</a></li> 
     <li><a href="#!/about" class="navi" >About us</a></li> 
     <li><a href="#!/gallary" class="navi" >Gallary</a></li> 
     <li><a href="#!/contact" class="navi" >Contact US</a></li> 
    </ul> 
    </div> 
    <div id="home"> 
     <h3 style="text-align:center;">HOME</h3> 
     text of home goes here...... 
    </div> 
    <div id="about" style="display:none;"> 
    <h3 style="text-align:center;">ABOUT US</h3> 
    Text for about us goes here. 
    </div> 
    <div id="gallary" style="display:none;"> 
    <h3 style="text-align:center;">GALLARY</h3> 
    <img src="slide1.jpg" width="100%" height="100%"> 
    </div> 
    <div id="contact" style="display:none;"> 
    <h3 style="text-align:center;">CONTACT US</h3> 
    Phone:xxxxxxxxxx<br> 
    Mobile:xxxxxxxxxx<br> 
    Email:DD@CC.com<br> 
    Fax:xxxxxxxxxx<br> 
    </div>