Question

我尝试创建一个下拉菜单，允许用户根据所选内容查看内容。 JQuery根据选择的链接隐藏<div>。该链接引用了<div> ID。

HTML和CSS看起来很好，但我无法让它与JQuery一起正常工作。我在几年内并没有真正使用过JQuery，所以对于我出错的地方的一些帮助会非常感激。

在我测试时，我只提供了工作链接和<div>四个选项，但很明显，一旦我弄清楚JQuery问题在哪里，我就会对它进行排序。 />

    <div class="menu-wrap">
    <nav class="menu">
        <ul class="clearfix">

            <li>
                <a href="#">Community Groups <span class="arrow">&#9660;</span></a>

                <ul class="sub-menu">

                    <li><a href="#tab1">1-Up</a></li>
                    <li><a href="#tab2">Choir</a></li>
                    <li><a href="#tab3">Committee</a></li>
                    <li><a href="#tab4">Creche</a></li>
                     <li><a href="#">Discovering Faith</a></li>
                     <li><a href="#">Friendship Club</a></li>
                     <li><a href="#">Kirk Klub</a></li>
                     <li><a href="#">Mainly Music</a></li>
                     <li><a href="#">Pastoral Care</a></li>
                     <li><a href="#">Social Committee</a></li>
                     <li><a href="#">Thursday Homegroup</a></li>
                     <li><a href="#">Welcome Team</a></li>
                     <li><a href="#">Young Women's Housegroup</a></li>

                </ul>
            </li>
        </ul>
    </nav>

</div>

    <div>
      <div class="tab-content">
        <div id="tab1" class="tab active">
            <p>Tab #1 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis.</p>
        </div>

        <div id="tab2" class="tab">
            <p>Tab #2 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
        </div>

        <div id="tab3" class="tab">
            <p>Tab #3 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum ri.</p>
        </div>

        <div id="tab4" class="tab">
            <p>Tab #4 content goes here!</p>
            <p>Donec pulvinar neque sed semper lacinia. Curabitur lacinia ullamcorper nibh; quis imperdiet velit eleifend ac. Donec blandit mauris eget aliquet lacinia! Donec pulvinar massa interdum risus ornare mollis. In hac habitasse platea dictumst. Ut euismod tempus hendrerit. Morbi ut adipiscing nisi. Etiam rutrum sodales gravida! Aliquam tellus orci, iaculis vel.</p>
        </div>
    </div>
    </div>

CSS：

body {

}
  .tab-content {
        padding:15px;
        border-radius:3px;
        box-shadow:-1px 1px 1px rgba(0,0,0,0.15);
        background:#fff;
    }

        .tab {
            display:none;
        }

        .tab.active {
            display:block;
        }

.clearfix:after {
    display:block;
    clear:both;
}

/*----- Menu Outline -----*/
.menu-wrap {
    width:100%;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    background:#f1f1f1;
}

.menu {

    margin:0px;
}

.menu li {
    margin:0px;
    list-style:none;
    font-family:'Raleway';
}

.menu a {
    transition:all linear 0.15s;
    color:#3399ff;
    text-decoration:none;
}

.menu li:hover > a, .menu .current-item > a {
    text-decoration:none;
    color:#666666;
}

.menu .arrow {
    font-size:11px;
    line-height:0%;
}

/*----- Top Level -----*/
.menu > ul > li {
    float:left;
    display:inline-block;
    position:relative;
    font-size:23px;
}

.menu > ul > li > a {
    padding:10px 10px;
    display:inline-block;

}

.menu > ul > li:hover > a, .menu > ul > .current-item > a {

}

/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
    z-index:1;
    opacity:1;
}

.sub-menu {
    width:100%;
    padding:5px 0px;
    position:absolute;
    top:100%;
    left:10px;
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:0px 2px 3px rgba(0,0,0,0.2);
    background:#f1f1f1;
}

.sub-menu li {
    display:block;
    font-size:16px;
}

.sub-menu li a {
    padding:10px 30px;
    display:block;
}

.sub-menu li a:hover, .sub-menu .current-item a {

}

JQuery的

jQuery(document).ready(function() {
    jQuery(' .sub-menu a').on('click', function(e)  {
        var currentAttrValue = jQuery(this).attr('href');

        // Show/Hide Tabs
        jQuery('#tabs' + currentAttrValue).show().siblings().hide();

        e.preventDefault();
    });
});

JSFiddle here https://jsfiddle.net/t8pqn3e1/

Answer 1

在继续之前，请深入了解jQuery Selectors。

jQuery('menu-wrap.menu.clearfix .sub-menu a')无效。

应该是

jQuery('.menu-wrap .menu .clearfix .sub-menu a')

更简单

jQuery('.menu-wrap .sub-menu a')

或

jQuery('.sub-menu a')

和

jQuery('.tabs' + currentAttrValue).show().siblings().hide();

需要

当您使用jQuery('#tabs' + currentAttrValue).show().siblings().hide();时，

id (eg. #tab1, #tab2 etc)。

Answer 2

<script>

jQuery(document).ready(function() {
    jQuery('.menu-wrap .menu .clearfix .sub-menu a').on('click', function(e)  {
        console.log ("entered!!!");
        var currentAttrValue = jQuery(this).attr('href');

        // Show/Hide Tabs
        jQuery(currentAttrValue).show();
        jQuery(currentAttrValue).siblings().hide();


        e.preventDefault();
    });
});
</script>

要记住，jquery选择器遵循与css选择器相同的规则。这应该有用。

在List Item上显示div单击JQuery

2 个答案:

在继续之前，请深入了解jQuery Selectors。