jQuery实现选项卡嵌套效果
本文实例为大家分享了jQuery实现选项卡嵌套效果的具体代码，供大家参考，具体内容如下
描述：
1.划上底部a的每一个菜单 让顶部的标签span的内容变成对应的a的内容
2.划上左边的li 切换到右侧对应的div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
text-decoration: none;
}
.wrap {
width: 800px;
height: 400px;
border: 2px solid blue;
margin: 20px auto;
display: flex;
}
.wrap>ul {
width: 150px;
height: 100%;
}
.wrap>ul li {
height: 100px;
background: red;
text-align: center;
line-height: 100px;
color: #fff;
font-size: 30px;
border-bottom: 1px solid blue;
box-sizing: border-box;
}
.wrap>ul .active {
background: yellow;
color: #fff;
}
.wrap>.cont {
position: relative;
width: 650px;
height: 400px;
background: cadetblue;
}
.wrap>.cont>.inner {
position: absolute;
top: 0;
left: 0;
background: blue;
width: 100%;
height: 100%;
box-sizing: border-box;
display: none;
}
.wrap>.cont>.inner.active {
display: block;
}
.wrap>.cont>.inner>span {
display: inline-block;
width: 100%;
height: 350px;
background: lightgreen;
text-align: center;
line-height: 350px;
font-size: 50px;
color: #fff;
}
.wrap>.cont>.inner>p {
display: flex;
}
.wrap>.cont>.inner>p>a {
line-height: 50px;
color: #fff;
background: purple;
flex-grow: 1;
text-align: center;
}
.wrap>.cont>.inner>p>a.active {
background: #fff;
color: #000;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li class="active">a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<div class="cont">
<div class="inner active">
<span>a1</span>
<p>
<a href="javascript:;" class="active">a1</a>
<a href="javascript:;">a2</a>
<a href="javascript:;">a3</a>
<a href="javascript:;">a4</a>
<a href="javascript:;">a5</a>
<a href="javascript:;">a6</a>
</p>
</div>
<div class="inner">
<span>b1</span>
<p>
<a href="javascript:;" class="active">b1</a>
<a href="javascript:;">b2</a>
<a href="javascript:;">b3</a>
<a href="javascript:;">b4</a>
<a href="javascript:;">b5</a>
<a href="javascript:;">b6</a>
<a href="javascript:;">b7</a>
<a href="javascript:;">b8</a>
</p>
</div>
<div class="inner">
<span>c1</span>
<p>
<a href="javascript:;" class="active">c1</a>
<a href="javascript:;">c2</a>
<a href="javascript:;">c3</a>
<a href="javascript:;">c4</a>
<a href="javascript:;">c5</a>
<a href="javascript:;">c6</a>
</p>
</div>
<div class="inner">
<span>d1</span>
<p>
<a href="javascript:;" class="active">d1</a>
<a href="javascript:;">d2</a>
<a href="javascript:;">d3</a>
<a href="javascript:;">d4</a>
</p>
</div>
</div>
</div>
<script src="./js/jquery.js"></script>
<script>
// 划上底部的a 将span的内容改变
$('p a').mouseenter(function () {
console.log($(this).addClass('active').siblings().removeClass('active').parent().prev().html($(this).html()));
});
// 划上左侧每一个li 显示右侧对应的inner inner和li下标是一致的
$('ul li').mouseenter(function () {
var ind = $(this).index();
console.log(ind);
console.log($(this).addClass('active').siblings().removeClass('active').parent().next().find('.inner').eq(ind).addClass('active').siblings().removeClass('active'));
});
</script>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jQuery实现套选项卡功能
本文实例为大家分享了jQuery实现套选项卡功能的具体代码,供大家参考,具体内容如下 知识点总结: 1.siblings():兄弟元素,获得匹配集合中每个元素的同胞,通过选择器进行筛选是可选的. 2.removeClass():方法从被选元素移除一个或多个类. 3.addClass():方法向被选元素添加一个或多个类. 4.eq():方法将匹配元素集缩减值指定 index 上的一个. 5.hide()和show():隐藏和显示特效. 6.parent():获得当前匹配元素集合中每个元素的父元素,
-
jquery实现具有嵌套功能的选项卡
关于选项卡功能大家一定都不会陌生,无非就是鼠标点击或者悬浮能够切换相关的内容. 通常情况下,大家见到的选项卡都是没有嵌套功能的,也就是说就是完成了一层切换效果,本章节分享一段代码实例,实现了选项卡的嵌套功能,也就是选项卡中嵌套有选项卡功能,也就能够容纳更多的内容. 代码如下: <head> <meta charset="gb2312"> <title>jquery选项卡</title> <style type="text/
-
JavaScript实现多层颜色选项卡嵌套
本文实例为大家分享了JavaScript实现多层颜色选项卡嵌套的具体代码,供大家参考,具体内容如下 这是学JavaScript时候的一个作业,如果没有思路还是挺有难度的,但是思路正确的话一步一步来就很简单做出来了. 实现效果 HTML部分代码 <div class="box" id="box"> <ul id="leftBox"> <li class="active">a</li>
-
jQuery实现选项卡嵌套效果
本文实例为大家分享了jQuery实现选项卡嵌套效果的具体代码,供大家参考,具体内容如下 描述: 1.划上底部a的每一个菜单 让顶部的标签span的内容变成对应的a的内容 2.划上左边的li 切换到右侧对应的div <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-
-
jQuery实现选项卡切换效果简单演示
本文实例讲述了jQuery实现选项卡切换效果简单演示代码.分享给大家供大家参考.具体如下: 运行效果图如下 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>选项卡</title> <link type="text/css" rel="stylesheet" href="c
-
基于jQuery实现仿百度首页选项卡切换效果
以下代码比较简单,所以没给大家附太多的注释,有问题欢迎给我留言,具体详情请看下文代码吧. 先给大家展示下效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery仿百度首页选项卡切换效果 - 何问起</title&
-
jQuery实现Tab选项卡切换效果简单演示
本文实例针对jQuery实现Tab选项卡切换效果进行了简单演示,完全是自己的思考实现过程,分享给大家供大家参考.具体如下: 起初我Html代码架子是这样的: <div class="tabs"> <ul> <li class="acss" data-box="#panel-1">标签1</li> <li class="bcss" data-box="#panel-
-
基于javascript实现最简单的选项卡切换效果
本文实例为大家分享了js选项卡切换效果的具体实现代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title>朱朱制作</title> <script src="js/jquery.js" type="text/javascript"></script> &
-
jQuery网页选项卡插件rTabs用法实例分析
本文实例讲述了jQuery网页选项卡插件rTabs用法.分享给大家供大家参考.具体如下: 这里介绍jQuery网页选项卡插件rTabs用法,一共演示了4种TAB选项卡样式,第一种:默认样式:自动运行.无动画效果.Hover事件:第二种:自动运行.向上滚动.支持Hover事件的TAB选项卡菜单:第三种:自动运行.渐入淡出.支持Hover事件的选项卡:第四种:自动运行.向左滚动.点击事件的网页选项卡,选一个你喜欢的放在你的网站吧. 先来看看运行效果截图: 在线演示地址如下: http://demo.
-
jQuery实现图片走马灯效果的原理分析
本文实例分析了jQuery实现图片走马灯效果的原理.分享给大家供大家参考,具体如下: 这里只讲解水平走马灯效果,垂直向上走马灯效果不讲解,原理一样,但是水平走马灯效果有一个小坑.待会讲解 先上代码: HTML: <div class="box"> <div style="width: 1000px;" id="boxdiv"> <ul> <li style="display: block;&qu
-
jQuery之选项卡的简单实现
jQuery实现选项卡功能.首先将界面搭建好. 有导航头tab_menu,还有内容tab_box. 要实现的效果就是,点击后,将相应的内容显示出来,其他内容隐藏掉. 同时为了展现选中状态,为选中的项添加背景,以示区别. 这一次,我自己写了代码,先看html部分: 复制代码 代码如下: <div class="tab"> <div class="tab_menu"> <ul> <li
-
非常棒的jQuery图片轮播效果
本文实例为大家分享了jQuery图片轮播效果,很个性,具体内容如下 购物产品展示:图片轮播器,效果如下所示: 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果 两个区域: 最外层容器区域,如上图红色线框矩形 选项卡区域 两个事件: 鼠标悬浮或鼠标划入mouseover 鼠标离开mouseleave /**大屏广告滚动样式**/ <!DOCTYPE html> <html lang="en"> <head> &l
-
jQuery右侧选项卡焦点图片轮播特效代码分享
本文实例讲述了jQuery右侧选项卡焦点图片轮播特效代码.分享给大家供大家参考.具体如下: jQuery实现的右侧选项卡焦点图片轮播动画特效源码,是一段清新可爱的焦点图轮播代码,支持自动轮播与手动点击. 运行效果图: ----------------------查看效果-源码下载---------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的jQuery右侧选项卡焦点图片轮播特效代码如下 <!DOCTYPE html PUBLIC "-