JavaScript实现多层颜色选项卡嵌套


Posted in Javascript onSeptember 21, 2020

本文实例为大家分享了JavaScript实现多层颜色选项卡嵌套的具体代码,供大家参考,具体内容如下

这是学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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 节点操作 以及DOMDocument属性和方法
Dec 06 Javascript
仅Firefox中链接A无法实现模拟点击以触发其默认行为
Jul 31 Javascript
深入分析jquery解析json数据
Dec 09 Javascript
通用javascript代码判断版本号是否在版本范围之间
Nov 29 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
May 27 Javascript
jQuery事件对象总结
Oct 17 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
js+html制作简单验证码
Feb 16 Javascript
Javascript将图片的绝对路径转换为base64编码的方法
Jan 11 Javascript
vue+element-ui+ajax实现一个表格的实例
Mar 09 Javascript
vue实现移动端触屏拖拽功能
Aug 21 Javascript
Vue中插槽slot的使用方法与应用场景详析
Jun 08 Vue.js
JS实现无限轮播无倒退效果
Sep 21 #Javascript
js+canvas绘制图形验证码
Sep 21 #Javascript
vue中路由跳转不计入history的操作
Sep 21 #Javascript
JS实现放大镜效果
Sep 21 #Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 #Javascript
Vue Element校验validate的实例
Sep 21 #Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
Sep 21 #Javascript
You might like
浅析51个PHP处理字符串的函数
2013/08/02 PHP
smarty中常用方法实例总结
2015/08/07 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
js创建子窗口并且回传值示例代码
2013/07/02 Javascript
JavaScript中setInterval的用法总结
2013/11/20 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
JavaScript闭包详解
2015/02/02 Javascript
javascript去掉代码里面的注释
2015/07/24 Javascript
jquery+CSS实现的多级竖向展开树形TRee菜单效果
2015/08/24 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
2016/05/19 Javascript
jQuery插件实现图片轮播特效
2016/06/16 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
详解iframe跨域的几种常用方法(小结)
2019/04/29 Javascript
JS 数组基本用法入门示例解析
2020/01/16 Javascript
vant 自定义 van-dropdown-item的用法
2020/08/05 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
[54:26]完美世界DOTA2联赛PWL S3 Forest vs Rebirth 第一场 12.10
2020/12/12 DOTA
使用apidoc管理RESTful风格Flask项目接口文档方法
2018/02/07 Python
Python实现E-Mail收集插件实例教程
2019/02/06 Python
pytorch标签转onehot形式实例
2020/01/02 Python
python定时截屏实现
2020/11/02 Python
详解python3 GUI刷屏器(附源码)
2021/02/18 Python
Spartoo英国:欧洲最大的网上鞋店
2016/09/13 全球购物
Java和Javasciprt的区别
2012/09/02 面试题
Internet主要有哪些网络群组成
2015/12/24 面试题
公务员政审单位鉴定材料
2014/05/16 职场文书
求职信的正确写法
2014/07/10 职场文书
基层干部群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
旷课检讨书
2015/01/26 职场文书
大雁塔英文导游词
2015/02/10 职场文书
限期整改通知书
2015/04/22 职场文书
Android实现获取短信验证码并自动填充
2023/05/21 Java/Android