使用jquery切换内容

Question

我正在创建一个单页web应用程序。我已经获取了四个列表元素Home、About us、Gallary、Contact us.After，其中有四个div，id为home、gallary、about和contact

 <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是bellow.Initially的，其中显示了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主页将显示类似的，如果我点击关于我们的id的div是关于显示，所以是与Gallary和contact.so我想知道我如何能做到这一点，我可以使用jquery效果，如滑动fadein etc.And还希望，当我按退格键在键盘上或浏览器上的前一个div应该加载。我尝试使用更改散列，但我不是successful.To更好地理解我的问题，你可以看到演示，实际上我想问的是什么。另外，如果有人能为这个问题提供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>