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 伪数组实现方法
Oct 11 Javascript
js中将字符串转换成json的三种方式
Jan 12 Javascript
基于Jquery的文字自动截取(提供源代码)
Aug 09 Javascript
基于jquery的固定表头和列头的代码
May 03 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
May 15 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
javascript判断回文数详解及实现代码
Feb 03 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
vue的diff算法知识点总结
Mar 29 Javascript
JS实现自定义弹窗功能
Aug 08 Javascript
JQuery判断radio单选框是否选中并获取值的方法
Jan 17 jQuery
ES6 Class中实现私有属性的一些方法总结
Jul 08 Javascript
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
PHP中4种常用的抓取网络数据方法
2015/06/04 PHP
php生成数字字母的验证码图片
2015/07/14 PHP
如何在PHP中使用AES加密算法加密数据
2020/06/24 PHP
脚本收藏iframe
2006/07/21 Javascript
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
appendChild() 或 insertBefore()使用与区别介绍
2013/10/11 Javascript
js获取时间(本周、本季度、本月..)
2013/11/22 Javascript
JavaScript 作用域链解析
2014/11/13 Javascript
node.js中的fs.writeFile方法使用说明
2014/12/14 Javascript
node.js中的fs.linkSync方法使用说明
2014/12/15 Javascript
深入理解JavaScript系列(22):S.O.L.I.D五大原则之依赖倒置原则DIP详解
2015/03/05 Javascript
jQuery常用且重要方法汇总
2015/07/13 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
JavaScript构造函数详解
2015/12/27 Javascript
响应式表格之固定表头的简单实现
2016/08/26 Javascript
JS控制HTML元素的显示和隐藏的两种方法
2016/09/27 Javascript
Javascript将字符串日期格式化为yyyy-mm-dd的方法
2016/10/27 Javascript
JavaScript之排序函数_动力节点Java学院整理
2017/06/30 Javascript
响应式框架Bootstrap栅格系统的实例
2017/12/19 Javascript
详解使用webpack构建多页面应用
2017/12/21 Javascript
js中Object.defineProperty()方法的不详解
2018/07/09 Javascript
Vue自定义弹窗指令的实现代码
2018/08/13 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
解密Python中的描述符(descriptor)
2015/06/03 Python
Python实现将sqlite数据库导出转成Excel(xls)表的方法
2017/07/17 Python
树莓派实现移动拍照
2019/06/22 Python
python json.dumps中文乱码问题解决
2020/04/01 Python
使用python脚本自动生成K8S-YAML的方法示例
2020/07/12 Python
美国滑雪和滑雪板商店:Buckman
2018/03/03 全球购物
匡威西班牙官网:Converse西班牙
2019/10/01 全球购物
财务会计毕业生自荐信
2013/11/02 职场文书
镇党政领导班子民主生活会思想汇报
2014/10/11 职场文书
三方合作意向书范本
2015/05/09 职场文书
前端JS获取URL参数的4种方法总结
2022/04/05 Javascript