jquery实现页面选项卡_jquery实现页面选项切换卡特效

【www.bbyears.com--jquery】

效果如下

思路：

1、写好样式，分成上下两个div，上面的是菜单，下面的是内容，上面菜单使用li标签左对齐排列，下面的内容同样用li左对齐，但是加上position:absolute;的css属性，让3个li重叠在一起；

 代码如下

/* 格式化div */
div{display:block;margin:0;padding:0;}
.on{background:#e3e3e3;}
.show{display:block;}
.hide{display:none;}

/* 选项卡菜单样式 */
.top{height:50px;width:450px;margin:100px auto 0;border:#ccc 1px solid;}
.top ul{margin:0;padding:0;height:50px;width:450px;line-height:50px;}
.top ul li{display:block;width:150px;float:left;text-align:center;}
.top ul li a{display:block;height:50px;width:150px;}
.top ul li a:hover{background:#e3e3e3;}

/* 选项卡菜单样式 */
.bottom{height:250px;width:450px;margin:0 auto;border:#ccc 1px solid;}
.bottom ul{margin:0;padding:0;height:50px;width:450px;line-height:50px;}
.bottom ul li{width:450px;height:250px;float:left;text-align:center;position:absolute;}
.bottom ul li a{display:block;height:50px;width:150px;}
.bottom ul li a:hover{background:#e3e3e3;}

2、鼠标移到选项卡菜单，将原来的选项卡菜单的背景色去掉，在新的选项卡加上背景色；
1）jq鼠标经过的函数hover，用法：

 代码如下     $(function(){
$(".top li").hover(
function(){
    //鼠标经过时候得处理
},
function(){
    //鼠标一开的时候处理
}
)
});

2）原来的选项卡菜单的背景色去掉，在新的选项卡加上背景色的处理

 代码如下  //处理鼠标滑过非当前选项卡菜单时改样式
$("li[class=on]").removeClass("on");//去掉当前选项卡菜单的背景色
$(this).addClass("on");//为hover到当前选项卡菜单增加背景色

3、原来下面的内容li是重叠在一起的，所以只要让当前菜单相对应的li显示，另外两个隐藏即可。所以需要给选项卡菜单和内容分别加上id或者class，让两者之间建立起相对应的联系。
1）将所有的内容li隐藏

 代码如下 //将所有的选项卡内容div隐藏
$(".bottom li[class=show]").attr("class","hide");

2）菜单通过id上面的数字对应下面的内容，让相对应的内容li加上显示样式

 代码如下 //通过选项卡菜单的id，查找相对应的内容id
var li_tab = $("li[class=on]").find("a").attr("id");
//将相对应的内容id的样式改成show
$("#t"+li_tab).attr("class","show");//之前

这次主要是用到jq函数有：
1：hover—–鼠标经过时处理函数
2：removeClass/addClass—–为元素去除和添加样式
3:find——查找当前元素的后代元素
4：attr——给DOM元素获取/添加属性
 
另外还有过滤选择器，$(“li[class=on]“)、$(“.bottom li[class=show]“),从所有匹配的元素中通过在后面加上[]来筛选

本文来源：http://www.bbyears.com/wangyezhizuo/58764.html