起航学习网

html部分

one

twotwo

threethreethree

four

fivefivefive

Css部分

Java开发部分

<java>

$(document).ready(function () {

/*设置默认激活的选项卡eq(i)*/

var aL = $(".list:eq(1)");

$("#active").width(aL.innerWidth());

$("#active").offset(aL.offset());

aL.addClass("listA");

/*为每个按钮添加点击事件*/

$(".list").click(function() {

$("#active").width($(this).innerWidth()); //设置宽度

$("#active").offset($(this).offset()); //设置位置

$(this).addClass("listA");

$(".list").not(this).removeClass("listA");

});

/*hover效果*/

$(".list").hover(function () {

$(this).addClass("listH")

},function () {

$(this).removeClass("listH")

})

});

</java>

文章出自：http://qh.itpxw.cn/peixun/web/202185242.html

文章标题：细谈Web前端开发query滑动tab选项卡

免责声明：本站文章均由入驻起航学习网的会员所发或者网络转载，所述观点仅代表作者本人，不代表起航学习网立场。如有侵权或者其他问题，请联系举报，必删。侵权投诉