首页 > PHP资讯 > HTML5培训技术 > 基于jquery实现最简单的选项卡切换效果_jquery

基于jquery实现最简单的选项卡切换效果_jquery

HTML5培训技术
这个功能在现在的网站中使用较为普遍,就是以选项卡的形式来对一些内容做了分类。,比如下面的天猫商城。

下面的源码是仿照天猫写的一个选项卡,实现起来的效果如下。

主要是利用我们在点击相应板块是触发它的单击事件,在单击事件中再对内容显示框(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》  

  • 时事
  • 体育
  • 娱乐

时事

体育

娱乐

以上就是本文的全部内容,希望对大家熟练掌握实现选项卡切换的技巧有所帮助。

HTML5培训技术

本文由欣才IT学院整理发布,未经许可,禁止转载。
支持35不支持0