突出显示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

您只需使用点击事件并为被点击的元素分配一个类：

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。这就是你所需要的全部代码。

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

JSFiddle

Answer 2

您可以将类active添加到CSS:中

.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演示