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

});

DEMO： http://jsfiddle.net/LzmuB/1/

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

使用nav html5查询javascript隐藏节目div

1 个答案: