基于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 相关文章推荐
网页里控制图片大小的相关代码
Jun 25 Javascript
JS正则中的RegExp对象对象
Nov 07 Javascript
IE 下Enter提交表单存在重复提交问题的解决方法
May 04 Javascript
Backbone.js的一些使用技巧
Jul 01 Javascript
动态设置form表单的action属性的值的简单方法
May 25 Javascript
JS实现的tab切换选项卡效果示例
Feb 28 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
dts文件中删除一个node或属性的操作方法
Aug 05 Javascript
js中数组常用方法总结(推荐)
Apr 09 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 Javascript
vue滚动固定顶部及修改样式的实例代码
May 30 Javascript
vue-cli4.x创建企业级项目的方法步骤
Jun 18 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
ThinkPHP中获取指定日期后工作日的具体日期方法
2018/10/14 PHP
JScript内置对象Array中元素的删除方法
2007/03/08 Javascript
Javascript计算时间差的函数分享
2011/07/04 Javascript
js动态添加onclick事件可传参数与不传参数
2014/07/29 Javascript
javascript实现捕捉键盘上按下的键
2015/05/05 Javascript
JavaScript实现定时隐藏与显示图片的方法
2015/08/06 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
使用jQuery5分钟快速搞定双色表格的简单实例
2016/08/08 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
JQ中$(window).load和$(document).ready区别与执行顺序
2017/03/01 Javascript
ECMAScript6--解构
2017/03/30 Javascript
jQuery中ajax获取数据赋值给页面的实例
2017/12/31 jQuery
Promise.all中对于reject的处理方法
2018/08/01 Javascript
layui实现图片虚拟路径上传,预览和删除的例子
2019/09/25 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
py中的目录与文件判别代码
2008/07/16 Python
python 获取本机ip地址的两个方法
2013/02/25 Python
Python用GET方法上传文件
2015/03/10 Python
深入Python函数编程的一些特性
2015/04/13 Python
PyQt5每天必学之创建窗口居中效果
2018/04/19 Python
Python脚本利用adb进行手机控制的方法
2019/07/08 Python
python 使用装饰器并记录log的示例代码
2019/07/12 Python
pytorch中如何使用DataLoader对数据集进行批处理的方法
2019/08/06 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
python中什么是面向对象
2020/06/11 Python
详解Python多线程下的list
2020/07/03 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
应届毕业生简历自我评价
2014/01/31 职场文书
永远跟党走演讲稿
2014/09/12 职场文书
办公室班子四风问题对照检查材料
2014/10/04 职场文书
民主评议政风行风活动心得体会
2014/10/29 职场文书
党员剖析材料范文
2014/12/18 职场文书
2015年科协工作总结
2015/05/19 职场文书
Python绘制散乱的点构成的图的方法
2022/04/21 Python