jquery实现选项卡切换代码实例


Posted in jQuery onMay 14, 2019

选项卡在网页中很常见,可以说是必备的一个元素了,网上其实也有很多案例讲解选项卡的做法,各种炫酷。
写这篇文章,就是记录下自己的一个练手Demo了。

两张简陋的图。

jquery实现选项卡切换代码实例

jquery实现选项卡切换代码实例

主要逻辑就在于找到选项卡和内容框相对应的下标。

<html>
<head>
<meta charset="UTF-8">
<title>选项卡</title>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
</head>
<style>
.tab{width:400px;height:400px;border:1px solid red;}
.tab-menu{height:100px;width:400px;border:1px solid grey;}
.tab-menu ul{list-style:none;}
.tab-menu li{display:block;width:30%;float:left;border:1px solid blue;}
.tab-box div{width:400px;height:300px;border:1px solid #ff4200;display:none;}
/* 让第一个框显示出来 */
.tab-box div:first-Child{display:block;} 
/* 改变选项卡选中时候的样式 */
.change{background:red;} 
</style>
<script>
$().ready(function(){
  $(".tab-menu li").mouseover(function(){
  //通过 .index()方法获取元素下标,从0开始,赋值给某个变量
    var _index = $(this).index();
  //让内容框的第 _index 个显示出来,其他的被隐藏
    $(".tab-box>div").eq(_index).show().siblings().hide();
  //改变选中时候的选项框的样式,移除其他几个选项的样式
  $(this).addClass("change").siblings().removeClass("change");
  });
});
</script>
<body>
  <div class="tab">
    <div class="tab-menu">
      <ul>
        <li>新服</li>
        <li>爆服</li>
        <li>大服</li>
      </ul>
    </div>
    <div class="tab-box">
      <div>123</div>
      <div>456</div>
      <div>789</div>
    </div>
  </div>
</body>
</html>

以上所述是小编给大家介绍的jquery实现选项卡切换详解整合,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

jQuery 相关文章推荐
jQuery tip提示插件(实例分享)
Apr 28 jQuery
jQuery插件select2利用ajax高效查询大数据列表(可搜索、可分页)
May 19 jQuery
JQueryMiniUI按照时间进行查询的实现方法
Jun 07 jQuery
jQuery实现节点的追加、替换、删除、复制功能示例
Jul 11 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
jQuery实现的简单图片轮播效果完整示例
Feb 08 jQuery
jQuery实现鼠标滑过商品小图片上显示对应大图片功能【测试可用】
Apr 27 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
jquery实现选项卡切换代码实例
May 14 jQuery
jQuery实现弹幕特效
Nov 29 jQuery
jQuery实现滑动开关效果
Aug 02 jQuery
jQuery列表动态增加和删除的实现方法
Nov 05 jQuery
JQuery样式操作、click事件以及索引值-选项卡应用示例
May 14 #jQuery
使用jQuery如何写一个含验证码的登录界面
May 13 #jQuery
JQuery特殊效果和链式调用操作示例
May 13 #jQuery
JQuery的加载和选择器用法简单示例
May 13 #jQuery
JQuery事件委托原理与用法实例分析
May 13 #jQuery
jQuery事件绑定和解绑、事件冒泡与阻止事件冒泡及弹出应用示例
May 13 #jQuery
使vue实现jQuery调用的两种方法
May 12 #jQuery
You might like
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
php使用cookie实现记住用户名和密码实现代码
2015/04/27 PHP
php设计模式之正面模式实例分析【星际争霸游戏案例】
2020/03/24 PHP
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
JavaScript 学习笔记(四)
2009/12/31 Javascript
javascript动态的改变IFrame的高度实现自动伸展
2013/10/12 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
javaScript中的this示例学习详解及工作原理
2014/01/13 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
什么是 AngularJS?AngularJS简介
2014/12/06 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
jQuery图片左右滚动代码 有左右按钮实例
2016/06/20 Javascript
vue.js的提示组件
2017/03/02 Javascript
详解用vue编写弹出框组件
2017/07/04 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
2017/07/07 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
禁止弹窗中蒙层底部页面跟随滚动的几种方法
2017/12/07 Javascript
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
Vue实现点击时间获取时间段查询功能
2020/08/21 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
js函数柯里化的方法和作用实例分析
2020/04/11 Javascript
基于JavaScript实现简单的轮播图
2021/03/03 Javascript
Python中输出ASCII大文字、艺术字、字符字小技巧
2015/04/28 Python
Python在图片中插入大量文字并且自动换行
2019/01/02 Python
python 实现PIL模块在图片画线写字
2020/05/16 Python
在pycharm中创建django项目的示例代码
2020/05/28 Python
numpy的Fancy Indexing和array比较详解
2020/06/11 Python
解决pytorch 数据类型报错的问题
2021/03/03 Python
纯css3实现效果超级炫的checkbox复选框和radio单选框
2014/09/01 HTML / CSS
班级聚会策划书
2014/01/16 职场文书
教师节主持词开场白
2015/05/29 职场文书
SQL 窗口函数实现高效分页查询的案例分析
2021/05/21 SQL Server
Python基础知识学习之类的继承
2021/05/31 Python
Go 语言中 20 个占位符的整理
2021/10/16 Golang