基于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 相关文章推荐
悬浮数字的实现案例
Feb 19 Javascript
jquery map方法使用示例
Apr 23 Javascript
js调试系列 初识控制台
Jun 18 Javascript
BAT及各大互联网公司2014前端笔试面试题--JavaScript篇
Oct 29 Javascript
轻松实现js图片预览功能
Jan 18 Javascript
js实现精确到毫秒的倒计时效果
Aug 05 Javascript
JavaScript将base64图片转换成formData并通过AJAX提交的实现方法
Oct 24 Javascript
JS基于对象的特性实现去除数组中重复项功能详解
Nov 17 Javascript
axios拦截设置和错误处理方法
Mar 05 Javascript
layer弹窗在键盘按回车将反复刷新的实现方法
Sep 25 Javascript
使用eslint和githooks统一前端风格的技巧
Jul 29 Javascript
详解JavaScript中的执行上下文及调用堆栈
Apr 29 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
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
php基于PDO实现功能强大的MYSQL封装类实例
2017/02/27 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
location.search在客户端获取Url参数的方法
2010/06/08 Javascript
基于豆瓣API+Angular开发的web App
2015/01/02 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
jQuery+HTML5实现图片上传前预览效果
2015/08/20 Javascript
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
JAVASCRIPT代码编写俄罗斯方块网页版
2015/11/26 Javascript
实例解析jQuery工具函数
2016/12/01 Javascript
JavaScript中定义对象原型的两种使用方法
2016/12/15 Javascript
jQuery+ajax实现局部刷新的两种方法
2017/06/08 jQuery
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
2020/12/30 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
Python对文件和目录进行操作的方法(file对象/os/os.path/shutil 模块)
2017/05/08 Python
python itchat实现微信自动回复的示例代码
2017/08/14 Python
python实现校园网自动登录的示例讲解
2018/04/22 Python
pandas read_excel()和to_excel()函数解析
2019/09/19 Python
css3新单位vw、vh的使用教程
2018/03/23 HTML / CSS
极简的HTML5模版
2015/07/09 HTML / CSS
美国时尚孕妇装品牌:A Pea in the Pod
2017/07/16 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
教师自我评价范例
2013/09/24 职场文书
母校寄语大全
2014/04/10 职场文书
党员一帮一活动总结
2014/07/08 职场文书
汉语言文学毕业求职信
2014/07/17 职场文书
北京离婚协议书范文2014
2014/09/29 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
优秀教育工作者事迹材料
2014/12/24 职场文书
高校教师个人总结
2015/02/10 职场文书
公开致歉信
2019/06/24 职场文书
500字作文之难忘的同学
2019/12/20 职场文书