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实现div跟随鼠标移动
Aug 20 jQuery
jQuery扇形定时器插件pietimer使用方法详解
Jul 18 jQuery
jQuery实现可编辑表格并生成json结果(实例代码)
Jul 19 jQuery
解决IE7中使用jQuery动态操作name问题
Aug 28 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery无冲突模式详解
Jan 17 jQuery
jQuery实现高级检索功能
May 28 jQuery
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
jQuery实现查看图片功能
Dec 01 jQuery
多种类型jQuery网页验证码插件代码实例
Jan 09 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
PHP排序算法的复习和总结
2012/02/15 PHP
PHP实现多图上传和单图上传功能
2018/05/17 PHP
jquery插件冲突(jquery.noconflict)解决方法分享
2014/03/20 Javascript
javascript正则表达式参数/g与/i及/gi的使用指南
2014/08/27 Javascript
使用JS获取当前地理位置方法汇总
2014/12/18 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
jQuery实现强制cookie过期方法汇总
2015/05/22 Javascript
javascript删除数组重复元素的方法汇总
2015/06/24 Javascript
在JavaScript中访问字符串的子串
2015/07/07 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
js自调用匿名函数的三种写法(推荐)
2016/08/19 Javascript
node.js中debug模块的简单介绍与使用
2017/04/25 Javascript
JS中的数组转变成JSON格式字符串的方法
2017/05/09 Javascript
利用jQuery实现简单的拖曳效果实例代码
2017/10/20 jQuery
关于js对textarea换行符的处理方法浅析
2018/08/03 Javascript
js实现文件上传功能 后台使用MultipartFile
2018/09/08 Javascript
js控制随机数生成概率代码实例
2019/03/21 Javascript
基于layui内置模块(element常用元素的操作)
2019/09/20 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
2020/05/19 jQuery
详谈python中冒号与逗号的区别
2018/04/18 Python
Python基于Floyd算法求解最短路径距离问题实例详解
2018/05/16 Python
详解python异步编程之asyncio(百万并发)
2018/07/07 Python
修改默认的pip版本为对应python2.7的方法
2018/11/06 Python
Python2 Selenium元素定位的实现(8种)
2019/02/25 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
python爬虫 模拟登录人人网过程解析
2019/07/31 Python
python如何使用socketserver模块实现并发聊天
2019/12/14 Python
Python定义一个Actor任务
2020/07/29 Python
利用CSS的Sass预处理器(框架)来制作居中效果
2016/03/10 HTML / CSS
html5通过canvas实现刮刮卡效果示例分享
2014/01/27 HTML / CSS
荷兰照明、灯具和配件网上商店:dmlights
2019/08/25 全球购物
预备党员党校学习自我评价分享
2013/11/12 职场文书
上班睡觉检讨书
2014/01/09 职场文书
幼儿园毕业典礼主持词
2014/03/21 职场文书
2015年小学教导处工作总结
2015/05/26 职场文书
找规律教学反思
2016/02/23 职场文书