javascript - 使用导航 html5 查询 javascript 隐藏显示 div

Question

我已经阅读了很多其他帖子，毫无疑问是我对 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>

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/

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