jquery - 突出显示 UL LI 事件菜单项

Question

我有一个简单的水平菜单。我想要实现的是:

1) 加载时，主菜单项具有背景色2) 当一个菜单项被选中时，它的背景颜色被高亮显示

HTML:

<ul class="tabs">
    <li>
        <div class="home">Home</div>
    </li>
    <li>
        <div class="contact">How to Contact Us</div>
    </li>
    <li>
        <div class="products">About Our Products</div>
    </li>
</ul>

<div class="home-section">
    Welcome to Home
</div>

<div class="contact-section hide">
    Welcome to Contact Us
</div>

<div class="products-section hide">
    Welcome to Products
</div>

CSS:

.tabs ul {
    list-style: none;
}

.tabs li {  
    display: inline-block;
    width: 25%;
    height: 50px;   
    text-align: center;
    color: #B84DFF;
    cursor: pointer;
    border-style:solid;
    border-width:1px;
}

.hide {
    display: none;
}

jQuery:

$('.home').on('click', function () {
    $(".home-section").show();
    $(".contact-section").hide();
    $(".products-section").hide();
});

$('.contact').on('click', function () {
    $(".home-section").hide();
    $(".contact-section").show();
    $(".products-section").hide();
});

$('.products').on('click', function () {
    $(".home-section").hide();
    $(".contact-section").hide();
    $(".products-section").show();
});

我的 fiddle :http://jsfiddle.net/oampz/dWbx5/10/

Answer 1

您可以只使用点击事件并为被点击的元素分配一个类:

jQuery:

$("ul.tabs li").click(function(){

    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");

});

CSS:

.tabs li.active
{
    background: #b84dff;
    color: white;
}

JSFiddle

---

编辑:

作为@techfoobar指出，您可以保存一行代码并将 jQuery 更改为:

$("ul.tabs li").click(function(){
    $(this).addClass("active").siblings().removeClass("active");
});

---

编辑2:

为了让内容变化更简洁，你可以做更多这样的事情:

$("ul.tabs li").click(function(){

    $("ul.tabs li").removeClass("active");
    $(this).addClass("active");

    $("div.tab").hide();
    $("div."+$(this).find("div").attr("id")+"-section").show();

});

我添加了一个类 .tab到每个内容 div，以便更容易选择它们。然后我隐藏所有的 div 并显示类名匹配 .[child div ID]-section 的那个.这就是您需要的所有代码。

请注意，我更改了所有 <div>'s class="home", etc至 id="home" .

JSFiddle