基于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 相关文章推荐
javascript 带有滚动条的表格,标题固定,带排序功能.
Nov 13 Javascript
jquery 可拖拽的窗体控件实现代码
Mar 21 Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 Javascript
开发中可能会用到的jQuery小技巧
Mar 07 Javascript
关于JavaScript对象的动态选择及遍历对象
Mar 10 Javascript
用jquery的方法制作一个简单的导航栏
Jun 23 Javascript
详解Node.js如何开发命令行工具
Aug 14 Javascript
angularJS深拷贝详解
Mar 23 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
Mar 29 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
深入浅析Vue 中 ref 的使用
Apr 29 Javascript
Javascript组合继承方法代码实例解析
Apr 02 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
8个必备的PHP功能开发
2015/10/02 PHP
PHP实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
深入解析PHP的Yii框架中的event事件机制
2016/03/17 PHP
Yii框架学习笔记之应用组件操作示例
2019/11/13 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
使用隐藏的new来创建对象
2011/03/29 Javascript
jQuery Ajax 仿AjaxPro.Utility.RegisterTypeForAjax辅助方法
2011/09/27 Javascript
JavaScript Array Flatten 与递归使用介绍
2011/10/30 Javascript
浅析JavaScript中的delete运算符
2013/11/30 Javascript
JavaScript代码实现图片循环滚动效果
2020/03/19 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
2016/12/31 Javascript
BootStrap中jQuery插件Carousel实现轮播广告效果
2017/03/27 jQuery
vue.js 获取当前自定义属性值
2017/06/01 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
详解基于mpvue微信小程序下载远程图片到本地解决思路
2019/05/16 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
2019/11/09 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
Vue中多元素过渡特效的解决方案
2020/02/05 Javascript
谈谈JavaScript中的函数
2020/09/08 Javascript
微信小程序实现选项卡滑动切换
2020/10/22 Javascript
python新手经常遇到的17个错误分析
2014/07/30 Python
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
StubHub新加坡:购买和出售全球活动门票
2017/03/10 全球购物
北大研究生linux应用求职信
2013/10/29 职场文书
2013年员工自我评价范文
2013/12/27 职场文书
生产车间班组长岗位职责
2014/01/06 职场文书
白酒市场营销方案
2014/02/25 职场文书
商铺租赁意向书
2014/04/01 职场文书
质量承诺书格式
2014/05/20 职场文书
小学生运动会通讯稿
2014/09/23 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js