下面的源码是仿照天猫写的一个选项卡,实现起来的效果如下。
主要是利用我们在点击相应板块是触发它的单击事件,在单击事件中再对内容显示框(tabbox)进行相应项的显示和隐藏操作。
同时利用hover为其添加了鼠标滑过时的效果。
代码:
<script src="jquery-1.3.2.min.js?1.1.11">《script》《script》 $(function () { var $p_li = $("p.tab_menu ul li"); $p_li.click(function () { //定义了tan_menu对应的单击事件,也就是类别的单击事件。 $(this).addClass("selected") .siblings().removeClass("selected"); var index = $p_li.index(this); $("p.tab_box>p").eq(index).show() .siblings().hide(); }).hover(function () { //定义了鼠标滑过特效 $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); }); }); 《script》
时事
体育
娱乐
以上就是本文的全部内容,希望对大家熟练掌握实现选项卡切换的技巧有所帮助。