垂直选项卡菜单

Question

我有以下设置作为垂直菜单在我的页面左边，内容在右边。有一个与每个链接相关的分区，我希望能够点击菜单链接，并在不同的Div之间切换我正在学习的jQuery，并且已经启动了下面的jQueryscript，但是我被卡住了。有没有办法用CSS做这件事，或者有人能给我一些帮助请。

HTML:

<ul id="nav">
       <li id="link-0">Home</li>
       <li id="link-1">Services</li>
       <li id="link-2">Products</li>
       <li id="link-3">Contact</li>
       <li id="link-4">About</li>
     </ul>
</div>

<div id="container">
   <div id="tab-0" class="menus"></div>
       <div id="tab-1"class="menus">Page Content 1</div>
       <div id="tab-2"class="menus">Page Content 2</div>
       <div id="tab-3"class="menus">Page Content 3</div>
       <div id="tab-4"class="menus">Page Content 4</div>
</div>

CSS:

#navigation
{ float:left;
width:20%;
height:720px;
border:1px solid #000;
margin-top:20px; }


#navigation h1
{ font-family: 'Open Sans Condensed', sans-serif;
font-size:3.0vw;
border:0px solid #F00;
text-transform:uppercase;
font-weight:bold;
text-shadow: #aaa 0.1em 0.1em 0.2em;
-moz-text-shadow: #aaa 0.1em 0.1em 0.2em;
-ms-text-shadow: #aaa 0.1em 0.1em 0.2em;
-webkit-text-shadow: #aaa 0.1em 0.1em 0.2em;
text-align:center;
margin-top:50px; }


#nav { width:20%;
border:0px solid #f00;
position:absolute;
list-style:none;
height:400px;
top:150px; }


#nav li {width:80%;
border:0px solid #000;
position:relative; 
display:block;
height:60px;
float:right;
top:50px; }


#nav li a
{ display:block;
text-decoration:none;
font-size:1.3vw;
color:#aaa;
padding-left:10px;  }


#nav li a:hover
{ color:#000; }


#social-network
{ width:90%;
height:40px;
border:0px solid #000;
margin-top:460px;
margin-left:15px; }


#social-network img
{ width:40px;
height:40px;
margin:0 0 0 20px ; }


#tab-0
{ float:left;
width:80%;
height:720px;
border:1px solid #000;
margin-top:20px; }



#tab-1
{ float:left;
width:80%;
height:720px;
border:1px solid #000;
background-color:#090;
display:none; }



#tab-2
{ float:left;
width:80%;
height:720px;
border:1px solid #000;
background-color:#00F;
display:none; }



#tab-3
{ float:left;
width:80%;
height:720px;
border:1px solid #000;
background-color:#FF0;
display:none; }



#tab-4
{ float:left;
width:80%;
height:720px;
border:1px solid #000;
background-color:#C6F;
display:none; }

JQuery:

$(document).ready(function () {
   $('.menus').hide();
    $('#link-1').click(function () {
        $('#tab-0').hide();
        $('#tab-1').show();
  });
});

Answer 1

为了使您的代码更加一致，在导航中使用a-elements对每个容器使用相应的href-attributes，如下所示：

<ul id="nav">
    <li><a href="#tab-1">Home</a></li>
    <li><a href="#tab-2">Home</a></li>
</ul>

还要更新您的JavaScript以反映这一点：

var content = $('.menus');
$('#nav a').click(function () {
    content.hide();
    content.filter(this.hash).show();
});

Demo

买前试一试