使用jQuery实现简单的tab框实例
html代码
实现简单的tab框 休闲装 名媛 运动服 女装男装童装 甜美风文艺风 运动男运动女
css代码
*{ margin:0; padding:0px; } ul{ width:300px; margin:10pxauto; } ulli{ list-style:none; } .mainli{ text-align:center; float:left; padding:5px; margin-left:10px; width:80px; cursor:pointer; background-color:#f3f2e7; } .main.style1{ width:50px; font-weight:bold; background-color:#f3f2e7; border:1pxsolid#837979; border-bottom:0; z-index:100; position:relative; } .sublevel{ width:260px; height:80px; padding:19px; background-color:#f3f2e7; clear:left; border:1pxsolid#837979; position:relative; top:-1px; } .sublevelli{ display:none; } .sublevel.style1{ display:block; }
jquery代码
$(function(){ //页面打开时呈现的效果 $(".sublevelli:eq(0)").show(); //each遍历输出 $(".mainli").each(function(index){ //click点击 $(this).click(function(){ //addClass()增加当前样式removeClass()移除除当前点击之外的同级样式 $(this).addClass("mainstyle1").siblings().removeClass("style1"); $(".sublevelli:eq("+index+")").show().siblings().hide(); }) }) })
以上这篇使用jQuery实现简单的tab框实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持毛票票。