Question

我正在创建一个单页面web应用程序。我已经采取了四个列表元素Home，关于我们，Gallary，联系我们。之后有四个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如下所示。最初显示带有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 home的div将同样显示如果我点击关于我们显示id为div的div，那么是Gallary和contact.so我想知道如何使用jquery效果这样做喜欢幻灯片fadein等。我也希望当我按下键盘或浏览器上的退格按钮时，前一个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>

用jquery切换内容

1 个答案: