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实现下拉菜单的手风琴效果
Jul 23 jQuery
jQuery 实时保存页面动态添加的数据的示例
Aug 14 jQuery
基于jQuery的表单填充实例
Aug 22 jQuery
jQuery实现倒计时功能 jQuery实现计时器功能
Sep 19 jQuery
jQuery+Cookie实现切换皮肤功能【附源码下载】
Mar 25 jQuery
jQuery实现点击图标div循环放大缩小功能
Sep 30 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
js与jquery获取input输入框中的值实例讲解
Feb 27 jQuery
jQuery 动画与停止动画效果实例详解
May 19 jQuery
jQuery HTML设置内容和属性操作实例分析
May 20 jQuery
深入分析jQuery.one() 函数
Jun 03 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
不用iconv库的gb2312与utf-8的互换函数
2006/10/09 PHP
php学习之数据类型之间的转换代码
2011/05/29 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
php如何计算两坐标点之间的距离
2018/12/29 PHP
PHP实时统计中文字数和区别
2019/02/28 PHP
VSCode+PHPstudy配置PHP开发环境的步骤详解
2020/08/20 PHP
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
2015/04/01 Javascript
一道常被人轻视的web前端常见面试题(JS)
2016/02/15 Javascript
基于Vue的移动端图片裁剪组件功能
2017/11/28 Javascript
JavaScript 跨域之POST实现方法
2018/05/07 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
通过seajs实现JavaScript的模块开发及按模块加载
2019/06/06 Javascript
在JavaScript中实现链式调用的实现
2019/12/24 Javascript
[01:24:16]2018DOTA2亚洲邀请赛 4.6 全明星赛
2018/04/10 DOTA
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
PyQt5每天必学之切换按钮
2020/08/20 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
Python从list类型、range()序列简单认识类(class)【可迭代】
2019/05/31 Python
基于python cut和qcut的用法及区别详解
2019/11/22 Python
Python 生成VOC格式的标签实例
2020/03/10 Python
Python小白垃圾回收机制入门
2020/06/09 Python
东南亚地区最大的购物网站Lazada新加坡站点:Lazada.sg
2016/07/17 全球购物
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
美国受欢迎的女性牛仔裤品牌:DL1961
2016/11/12 全球购物
毕业自我鉴定怎么写
2014/03/25 职场文书
施工协议书范本
2014/04/22 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
股指期货心得体会
2014/09/10 职场文书
党员创先争优心得体会
2014/09/11 职场文书
2014年行政工作总结
2014/11/19 职场文书
2014年保险业务员工作总结
2014/12/23 职场文书
三年级学生期末评语
2014/12/26 职场文书
python正则表达式re.search()的基本使用教程
2021/05/21 Python
MySQL系列之四 SQL语法
2021/07/02 MySQL