tab栏切换案例

来源：互联网发布：oracle 数据库权限角色编辑：程序博客网时间：2024/05/18 03:22

这里写图片描述

<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");            });        });

0 0