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


Posted in Javascript onMay 08, 2016

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

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

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

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

主要是利用我们在点击相应板块是触发它的单击事件,在单击事件中再对内容显示框(tabbox)进行相应项的显示和隐藏操作。

同时利用hover为其添加了鼠标滑过时的效果。

代码:

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <link href="css/style1.css" rel="stylesheet" type="text/css" />
  <script src="jquery-1.3.2.min.js"></script>
  <title></title>
  <script>
    $(function () {
      var $div_li = $("div.tab_menu ul li");
      $div_li.click(function () {       //定义了tan_menu对应的单击事件,也就是类别的单击事件。
        $(this).addClass("selected")
        .siblings().removeClass("selected");
        var index = $div_li.index(this);
        $("div.tab_box>div").eq(index).show()
        .siblings().hide();
      }).hover(function () {         //定义了鼠标滑过特效
        $(this).addClass("hover");
      }, function () {
        $(this).removeClass("hover");
      });
    });

  </script>
</head>
<body>
  <div class="tab">
    <div class="tab_menu">
      <ul>
        <li class="selected">时事</li>
        <li>体育</li>
        <li>娱乐</li>
      </ul>
    </div>
    <div class="tab_box">
      <div>时事</div>
      <div class="hide">体育</div>
      <div class="hide">娱乐</div>
    </div>
  </div>
</body>
</html>

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

Javascript 相关文章推荐
JQuery的ajax获取数据后的处理总结(html,xml,json)
Jul 14 Javascript
使用jQuery jqPlot插件绘制柱状图
Dec 18 Javascript
JavaScript三元运算符的多种使用技巧
Apr 16 Javascript
JavaScript用select实现日期控件
Jul 17 Javascript
自带气泡提示的vue校验插件(vue-verify-pop)
Apr 07 Javascript
详细讲解vue2+vuex+axios
May 27 Javascript
如何使node也支持从url加载一个module详解
Jun 05 Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 Javascript
使用layer弹窗和layui表单实现新增功能
Aug 09 Javascript
从零开始实现Vue简单的Toast插件
Dec 03 Javascript
原生javascript单例模式的应用实例分析
Feb 23 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
基于javascript实现图片滑动效果
May 07 #Javascript
基于jquery实现图片放大功能
May 07 #Javascript
基于bootstrap插件实现autocomplete自动完成表单
May 07 #Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
May 07 #Javascript
js实现上传图片及时预览
May 07 #Javascript
Backbone.js框架中Model与Collection的使用实例
May 07 #Javascript
JavaScript的Backbone.js框架环境搭建及Hellow world示例
May 07 #Javascript
You might like
source.php查看源文件
2006/12/09 PHP
PHP上传图片、删除图片简单实例
2016/11/12 PHP
php接口技术实例详解
2016/12/07 PHP
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
jquery实现pager控件示例
2014/04/09 Javascript
javascript实现瀑布流自适应遇到的问题及解决方案
2015/01/28 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
2020/12/22 Javascript
AngularJs学习第八篇 过滤器filter创建
2016/06/08 Javascript
JS在浏览器中解析Base64编码图像
2017/02/09 Javascript
第一次记录Bootstrap table学习笔记(1)
2017/05/18 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
jQuery进阶实践之利用最优雅的方式如何写ajax请求
2017/12/20 jQuery
vue 做移动端微信公众号采坑经验记录
2018/04/26 Javascript
Vue.js实现数据响应的方法
2018/08/13 Javascript
一步步教你利用Docker设置Node.js
2018/11/20 Javascript
node.js使用express框架进行文件上传详解
2019/03/03 Javascript
微信小程序全局变量GLOBALDATA的定义和调用过程解析
2019/09/23 Javascript
微信小程序可滑动周日历组件使用详解
2019/10/21 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
[01:02:03]2014 DOTA2华西杯精英邀请赛 5 24 NewBee VS VG
2014/05/26 DOTA
Python中函数的用法实例教程
2014/09/08 Python
Python解析xml中dom元素的方法
2015/03/12 Python
python+opencv实现高斯平滑滤波
2020/07/21 Python
vim自动补全插件YouCompleteMe(YCM)安装过程解析
2019/10/21 Python
利用python实现冒泡排序算法实例代码
2019/12/01 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
Jupyter Notebook远程登录及密码设置操作
2020/04/10 Python
一套Delphi的笔试题二
2013/05/11 面试题
师范应届生求职信
2013/11/15 职场文书
大学生求职自我评价
2014/01/16 职场文书
五一劳动节活动总结
2015/02/09 职场文书
公司年会开场白
2015/06/01 职场文书
2016参观监狱警示教育活动心得体会
2016/01/15 职场文书
草系十大最强宝可梦,纸片人上榜,榜首大家最熟悉
2022/03/18 日漫