我一直在阅读很多其他的帖子，毫无疑问是我对 jQuery 的缺乏经验给我带来了麻烦，但是有很多事情接近我想要完成的事情。
我有一个 div，其中有一组垂直导航按钮。
在里面，我想要根据用户单击的导航按钮显示或隐藏的其他 div（子 div）。
我希望所有这些 div 都位于屏幕上的同一位置......所以，基本上就像一个选项卡式表单，但具有垂直导航。
我真的不知道如何最好地实现每个 div 的隐藏和显示，当它的按钮被点击时，另一个 div 的按钮。
这是我拥有的导航 html
<div id="lowerDetail">
<div id="lowersectionmenu">
<ul>
<li><a href="#Notes" title="Notes">Notes</a></li>
<li><a href="#People" title="People">People</a></li>
<li><a href="#NextTab" title="Next Tab">Next Tab</a></li>
<li><a href="#LastTab" title="LastTab">Last Tab/a></li>
</ul>
</div>
<div id="Notes">
<form>
<input type="text" name="noteEntry" id="noteEntry" class="noteEntryField" placeholder="Note Entry" size="100" />
<button type="submit" class="noteEntryButton" id="sendNote" value="Submit" class="buttonAddNote">Submit Note</button>
</form>
</div>
<div id="People">
<form>
<input type="text" name="addName" id="addName" placeholder="Name" size="35" />
<input type="text" name="addPhone" id="addPhone" placeholde="XXX-XXX-XXXX" size="15" />
</form>
</div>
<div id="NextTab">Next Tab </div>
<div id="LastTab">Last Tab </div>
</div>
我知道这是非常基本的，但这里也是 CSS。
#lowersectionmenu {
float:left;
width: 120px;
border-style: solid solid none solid;
border-color: #94AA74;
border-size: 1px;
border-width: 1px;
margin: 10px;
}
#lowersectionmenu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#lowersectionmenu li a:link, #lowersectionmenu li a:visited {
color: #5E7830;
display: block;
background: url(images/menu1.png);
padding: 8px 0 0 10px;
}
#lowersectionmenu li a:hover {
color: #26370A;
background: url(images/menu1.png) 0 -32px;
padding: 8px 0 0 10px;
}
#lowersectionmenu li a:active {
color: #26370A;
background: url(images/menu1.png) 0 -64px;
padding: 8px 0 0 10px;
}
#lowersectionmenu ul {
list-style: none;
margin: 0;
padding: 0;
}
.noteEntryField {
position:relative;
top:20px;
}
.noteEntryButton {
position:relative;
top:20px;
height:27px;
outline:none;
text-align:center;
background: #66ff33;
background: -webkit-gradient(linear, left top, left bottom, from(#66cc33), to(#669933));
background: -moz-linear-gradient(top, #66cc33, #669933);
font-size:14px;
border-radius:4px;
color:#606060;
text-shadow:2px 2px 2px #f0f0f0;
}
现在我只需要一些适当的 jQuery 代码来实现魔法。
我感谢任何和所有的帮助。
我正在添加作为答案给出的 jQuery，但仍然没有运气。也许有人可以告诉我出了什么问题。所有 div 都是可见的，并且表单字段是堆叠的……不管我做什么。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$('#lowersectionmenu a').click(function() {
/* hide any previous active nav and remove activeClass, fails quietly if none found*/
$('.navActive').hide().removeClass('navActive');
/* create ID selector from this link */
var id = $(this).attr('href') /* or using native script this.href*/
/* will return string "#Notes" which is exactly the same as ID selector string for jQuery*/
/* show proper item and add active class used to find open element above*/
$(id).show().addClass('navActive');
return false; /* prevent browser default events for anchor tag */
});
</script>