突出显示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();
});

我的小提琴：http://jsfiddle.net/oampz/dWbx5/10/

Answer 1

您可以使用click事件并将类分配给单击的元素：

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();

});

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

请注意，我已将所有<div>'s class="home", etc更改为id="home"。

JSFiddle

Answer 2

您可以在CSS中添加一个班级active：

.tabs li.active {
    background-color: #444;
}

然后您可以在菜单中添加和删除此类，如下所示：

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

---

实际上，我建议您使用data-*属性缩短代码：

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

然后是jQuery：

$('ul.tabs li').click(function() {
    $(this).addClass("active").siblings().removeClass("active");
    var section = $(this).attr('data-section');
    $('div.'+section).show().siblings('div').hide();
});

<强> Fiddle Demo