基于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 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
自己动手写的javascript前端等待控件
Oct 30 Javascript
基于jquery实现简单的手风琴特效
Nov 24 Javascript
JavaScript操作class和style样式代码详解
Feb 13 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
jQuery+ThinkPHP+Ajax实现即时消息提醒功能实例代码
Mar 21 jQuery
Angular.JS通过指令操作DOM的方法
May 10 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
vue组件编写之todolist组件实例详解
Jan 22 Javascript
详解如何使用koa实现socket.io官网的例子
Nov 04 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 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
ucenter通信原理分析
2015/01/09 PHP
PHP实现自动对图片进行滚动显示的方法
2015/03/12 PHP
PHP SOCKET编程详解
2015/05/22 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
js单例模式的两种方案
2013/10/22 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
2014/01/07 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
黑帽seo劫持程序,js劫持搜索引擎代码
2015/09/15 Javascript
jquery判断输入密码两次是否相等
2020/04/22 Javascript
实例讲解JS中setTimeout()的用法
2016/01/28 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
layui.use模块外部使用其内部定义的js封装函数方法
2019/09/16 Javascript
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
2021/02/15 Javascript
编写Python脚本抓取网络小说来制作自己的阅读器
2015/08/20 Python
深入浅析Python中的yield关键字
2018/01/24 Python
Anaconda下安装mysql-python的包实例
2018/06/11 Python
Python实现的多进程拷贝文件并显示百分比功能示例
2019/04/09 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
Django 外键的使用方法详解
2019/07/19 Python
python实现图片中文字分割效果
2019/07/22 Python
使用OpenCV获取图像某点的颜色值,并设置某点的颜色
2020/06/02 Python
Python xpath表达式如何实现数据处理
2020/06/13 Python
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
幼儿园实习生辞职信
2014/01/20 职场文书
升旗仪式主持词
2014/03/19 职场文书
2014年清明节网上祭英烈寄语
2014/04/09 职场文书
公务员培的训心得体会
2014/09/01 职场文书
村委会贫困证明范本
2014/09/17 职场文书
幼儿园2015年度工作总结
2015/04/01 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python
Win11 Build 22000.829更新补丁KB5015882发布(附更新修复内容汇总)
2022/07/15 数码科技