基于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 相关文章推荐
精心挑选的12款优秀的基于jQuery的手风琴效果插件和教程
Aug 22 Javascript
Javascript判断图片尺寸大小实例分析
Jun 16 Javascript
jquery操作对象数组元素方法详解
Nov 26 Javascript
js转html实体的方法
Sep 27 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
微信小程序 侧滑删除(左滑删除)
May 23 Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
浅谈Vue服务端渲染框架Nuxt的那些事
Dec 21 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
读懂CommonJS的模块加载
Apr 19 Javascript
JavaScript实现酷炫的鼠标拖尾特效
Feb 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
Zend的MVC机制使用分析(一)
2013/05/02 PHP
php遍历目录方法小结
2015/03/10 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
用jquery存取照片的具体实现方法
2013/06/30 Javascript
JavaScript使用循环和分割来替换和删除元素实例
2014/10/13 Javascript
使用javascript实现json数据以csv格式下载
2015/01/09 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
2016/02/17 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
探讨:JavaScript ECAMScript5 新特性之get/set访问器
2016/05/05 Javascript
快速入门Vue
2016/12/19 Javascript
Javascript中for循环语句的几种写法总结对比
2017/01/23 Javascript
jQuery多选框选择数量限制方法
2017/02/08 Javascript
angular2组件中定时刷新并清除定时器的实例讲解
2018/08/31 Javascript
基于node+vue实现简单的WebSocket聊天功能
2020/02/01 Javascript
js 使用ajax设置和获取自定义header信息的方法小结
2020/03/12 Javascript
Vue.js桌面端自定义滚动条组件之美化滚动条VScroll
2020/12/01 Vue.js
[01:25]2014DOTA2国际邀请赛 zhou分析LGD比赛情况
2014/07/14 DOTA
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
Django框架下在视图中使用模版的方法
2015/07/16 Python
Python使用Redis实现作业调度系统(超简单)
2016/03/22 Python
Python设计模式之工厂模式简单示例
2018/01/09 Python
Python Json模块中dumps、loads、dump、load函数介绍
2018/05/15 Python
pygame游戏之旅 添加游戏介绍
2018/11/20 Python
django基于存储在前端的token用户认证解析
2019/08/06 Python
python tkinter基本属性详解
2019/09/16 Python
Python dict的常用方法示例代码
2020/06/23 Python
Python配置pip国内镜像源的实现
2020/08/20 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
推荐10个HTML5响应式框架
2016/02/25 HTML / CSS
中东奢侈品购物网站:Ounass
2020/09/02 全球购物
护理自荐信
2013/10/22 职场文书
软件项目开发计划书
2014/05/01 职场文书
教师个人考察材料
2014/12/16 职场文书
MySQL中order by的使用详情
2021/11/17 MySQL