JavaScript实现多层颜色选项卡嵌套
作者:八弟吖 发布时间:2023-09-18 04:42:28
标签:js,选项卡,嵌套
本文实例为大家分享了JavaScript实现多层颜色选项卡嵌套的具体代码,供大家参考,具体内容如下
这是学JavaScript时候的一个作业,如果没有思路还是挺有难度的,但是思路正确的话一步一步来就很简单做出来了。
实现效果
HTML部分代码
<div class="box" id="box">
<ul id="leftBox">
<li class="active">a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
<div id="rightBox">
<div id="rightBox1" class="active">
<a href="#" >a1</a>
<ul class="tabUl">
<li class="hover">a1</li>
<li>a2</li>
<li>a3</li>
<li>a4</li>
</ul>
</div>
<div id="rightBox2">
<a href="#" >b1</a>
<ul class="tabUl">
<li class="hover">b1</li>
<li>b2</li>
<li>b3</li>
<li>b4</li>
</ul>
</div>
<div id="rightBox3">
<a href="#" >c1</a>
<ul class="tabUl">
<li class="hover">c1</li>
<li>c2</li>
<li>c3</li>
<li>c4</li>
<li>c5</li>
<li>c6</li>
</ul>
</div>
<div id="rightBox4">
<a href="#" >d1</a>
<ul class="tabUl">
<li class="hover">d1</li>
<li>d2</li>
<li>d3</li>
<li>d4</li>
</ul>
</div>
</div>
</div>
css部分代码
<style>
* {
margin: 0px;
padding: 0px;
list-style: none;
text-decoration: none;
}
.box {
width: 800px;
border: 1px solid #000000;
margin: 20px auto;
background: blue;
}
.box:after {
content: "";
display: block;
clear: both;
}
#leftBox {
float: left
}
#rightBox {
float: left;
}
#leftBox li {
width: 200px;
height: 89px;
background: red;
margin-bottom: 2px;
color: #fff;
font: 50px/89px "黑体";
text-align: center;
}
#rightBox div {
display: none;
}
#rightBox .active {
display: block;
}
#rightBox a {
display: block;
width: 600px;
height: 325px;
background: #0F0;
font-size: 100px;
color: #000;
text-align: center;
text-decoration: none;
line-height: 360px;
}
.tabUl {
display: table;
width: 100%;
}
.tabUl li {
display: table-cell;
background: #909;
color: #fff;
font-size: 20px;
text-align: center;
height: 40px;
line-height: 40px;
border-right: 2px solid #03C;
cursor: pointer;
}
.tabUl li.hover {
background: #fff;
color: #000;
}
#leftBox .active {
background: yellow;
color: #000;
}
</style>
JavaScript实现代码
思路:鼠标移入左边的每个li后,都会改变他的颜色,所以只需要改变class名,同时右边也会显示对于的div,有对应的话一般都会用到自定义索引值和this…
<script>
/*
点击左边的li后,所点击li加上class名,其它清除所有,然后右边对应索引值的div也加上class=active,所以要用到this
*/
//获取元素
var lUl = document.getElementById('leftBox')
var rUl = document.getElementById('rightBox')
var lLi = lUl.getElementsByTagName('li')
var oDiv = rUl.getElementsByTagName('div')
//改变左边样式
for (var i = 0; i < lLi.length; i++) {
//自定义索引
lLi[i].index = i
lLi[i].onmouseenter = function () {
//清空所有classname
for (var j = 0; j < lLi.length; j++) {
lLi[j].className = ''
oDiv[j].className = ''
}
//给相应的li添加上classname
this.className = 'active'
oDiv[this.index].className = 'active'
}
}
//右边
for (var k = 0; k < oDiv.length; k++) {
fn(oDiv[k])
}
function fn(parent) {
//获取用到的元素
var rLi = parent.getElementsByTagName('li')
var oa = parent.getElementsByTagName('a')[0]
for (var i = 0; i < rLi.length; i++) {
rLi[i].onmouseenter = function(){
for (j = 0; j < lLi.length; j++) {
rLi[j].className = ''
}
this.className = 'hover'
//把li标签中的文字传到a标签中
oa.innerHTML = this.innerHTML
}
}
}
</script>
来源:https://blog.csdn.net/colline/article/details/108676930
0
投稿
猜你喜欢
- 本文实例讲述了JS实现合并json对象的方法。分享给大家供大家参考,具体如下:一、问题:求json对象合并的方法var a ={"
- 如何做一个自己的QQ?这不是什么新鲜的东西,看看代码:refresh.htm<HTML><HEAD><titl
- Dreamweaver从出道以来,其简便易用而又功能强大的“行为”(Behavior)一直是大家所关注的热点之一。在Dreamweaver
- 优化糟糕设计的表结果或者索引能很大程度改进mysql的性能。 如果需要高性能, 那么就需要根据不同的操作需求精心设计表结构和索引, 这当然需
- 解决MySQL中文乱码的问题看到从数据库中取出的数据全部是“?????”,太让人郁闷了。网上有很多方法来解决这个问
- 在制作网页的过程中,自适应问题是经常遇到,而又最让人头疼的,看了好多种解决的方法,但是都不是万能的。今天遇到这个问题,实在让我挠头,借鉴了
- 在PyTorch中,torch.Tensor类是存储和变换数据的重要工具,相比于Numpy,Tensor提供GPU计算和自动求梯度等更多功能
- <!doctype><html><head><title>新闻图片轮换类</title
- 从信息组织角度来看,段落内行之间的关系要比段落之间的关系低一个级别,所以在呈现上段落之间的“段距”应该大于段落之内的“行距”,如此才能一目了
- 用ASP代码实现对access数据库的在线压缩处理,注意压缩前请备份数据库。我们知道每个一段时间压缩一下access数据库,可以减少数据库的
- xmlhttp,IE不支持overrideMimeType()方法,即使是IE7。 // Mozilla/Safari/
- 前言今天笔者想和大家来聊聊python接口自动化如何使用requests库发送http请求,废话呢笔者就不多说了,直接进入正题。一、requ
- php本身没有提供返回毫秒数的函数,但提供了一个microtime()函数,该函数返回一个array,包含两个元素,一个是秒数,一个是小数表
- 很多时候,由于程序设计需要,要求在asp的include包含文件里调用动态的文件。如<!--#include file=&q
- 一、问题的提出随着互连网的发展,网站的数量以惊人的数字增加。网站的作用除了给广大网友们提供信息资讯服务外,还应该成为网友们上传与下载文件的场
- 每个 batch 前清空梯度,否则会将不同 batch 的梯度累加在一块,导致模型参数错误。然后我们将输入和目标张量都移动到所需的设备上,并
- CSS 和 JavaScript 的压缩已经很成熟,各大网站都在使用。HTML 的压缩(特指去除空白字符和注释),除了 Google 等搜索
- 从AspJpeg1.8 版本开始,AspJpeg 提供了比 PrintText 更为灵活的文本绘图方法PrintTextEx,PrintTe
- 为你的网站,博客等添加rss聚合功能,给出rss.asp和rss.xml两种的聚合代码看过的朋友可帮忙顶哦,这些代码都是第一次发的,外面很多
- 以前跟同事开玩笑时说过,我们遇到的用户在访谈测试过程中的表现基本上就三种类型,发泄型,赞美型和实话实说型。发泄型用户通常是在产品的使用过程中