tab栏切换案例

<div class="wrapper">
    <ul class="tab">
        <li class="tab-item active">国际大牌<span>◆span>li>
        <li class="tab-item">国妆名牌<span>◆span>li>
        <li class="tab-item">清洁用品<span>◆span>li>
        <li class="tab-item">男士精品li>
    ul>
    <div class="products">
        <div class="main selected">
            <a href="###"><img src="imgs/guojidapai.jpg" alt=""/>a>
        div>
        <div class="main">
            <a href="###"><img src="imgs/guozhuangmingpin.jpg" alt=""/>a>
        div>
        <div class="main">
            <a href="###"><img src="imgs/qingjieyongpin.jpg" alt=""/>a>
        div>
        <div class="main">
            <a href="###"><img src="imgs/nanshijingpin.jpg" alt=""/>a>
        div>
    div>
div>

js代码

$(function () {
            //链式编程
            $(".tab>li").mouseover(function () {
                $(this).addClass("active").siblings("li").removeClass("active");
                //获取li的索引
                var index=$(this).index();
                $(".products>div:eq("+index+")").addClass("selected").siblings("div").removeClass("selected");
            });
        });