使用NAV HTML5查询JavaScript使用隐藏显示DIV

Question

我一直在阅读许多其他文章，毫无疑问，我对jQuery的经验使我感到麻烦完成。

我有一个Div，其中有一组垂直导航的按钮。

我想要基于用户点击的导航按钮显示或隐藏的其他divs（儿童divs）。

我希望所有这些divs都位于屏幕上的同一位置...因此，基本上就像标签形式一样，但带有垂直导航。

我无法真正弄清楚如何在单击另一个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作为答案，但仍然没有运气。也许有人可以告诉我怎么了。所有Divs都是可见的，形式字段都被堆叠...不管我做什么。

<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>

Answer 1

以下应该有效

$('#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 */   
});

演示： http://jsfiddle.net/lzmub/1/

活动类的切换是一种非常常见的方法，因此可以快速找到当前活动的项目并停用