Question

我将以下设置作为页面左侧的垂直菜单和右侧的内容。每个链接都有一个Div，我希望能够点击菜单链接并在各个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 - 导航中的元素以及相应的href - 每个容器的属性，例如：

<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();
});

<强>演示

Try before buy

垂直标签菜单

1 个答案: