使用nav html5查询javascript隐藏show div

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

现在我只需要一些合适的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>

$（'#lowersectionmenu a'）。单击（函数（）{
/*隐藏任何以前的活动导航并删除activeClass，如果找不到，则悄悄失败*/
$（'.navActive'）.hide（）.removeClass（'navActive'）；
/*从此链接创建ID选择器*/
var id=$（this.attr（'href'）/*或使用本机脚本this.href*/
/*将返回字符串“#Notes”，它与jQuery的ID选择器字符串完全相同*/
/*显示适当的项并添加用于查找上面打开的元素的活动类*/
$（id）.show（）.addClass（'navActive'）；
返回false；/*阻止锚定标记的浏览器默认事件*/
});

以下内容应该可以使用

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

});

演示：

---

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

您的主要问题样式是什么，或者应该隐藏和显示哪个div？如何根据用户单击的导航按钮显示div或隐藏所有其他div。charlietfl中的示例应该可以使用，但我确信在执行过程中我遗漏了一些东西。好的，我在一个javascript部分将其添加到了我的html5文档中，但是在html的开头是否有一些特定的jQuery版本需要参考？现在，两个div显示，表单字段彼此堆叠。导航按钮的单击事件似乎没有任何作用。请确保代码包装在

$（function（）{}）中这样它就不会在元素存在之前触发。并确保在依赖jQuery.js的任何代码之前包含jQuery.js。使用浏览器控制台检查错误我显然仍然缺少一些东西…请查看对上述代码的编辑，包括我得到的jQuery…也许你会发现问题所在。代码未包装在
文档中。准备好了
按照我在上一条评论中发布的方式处理。这是任何jQUery代码学习使用浏览器控制台查找抛出的错误并作为调试工具的第一步
$('#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 */   

});