tab切换

最新推荐文章于 2024-05-06 14:42:27 发布

LW0512

最新推荐文章于 2024-05-06 14:42:27 发布

阅读量118

点赞数

分类专栏： dom 文章标签： dom

本文链接：https://blog.csdn.net/LW0512/article/details/108836102

版权

dom 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

tab切换案例实现

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style-type: none;
    }

    .box {
      width: 400px;
      height: 300px;
      border: 1px solid #ccc;
      margin: 100px auto;
      overflow: hidden;
    }

    .hd {
      height: 45px;
    }

    .hd span {
      display: inline-block;
      width: 90px;
      background-color: cyan;
      line-height: 45px;
      text-align: center;
      cursor: pointer;
    }

    .hd span.current {
      background-color: #ddd;
    }

    .bd li {
      height: 255px;
      background-color: #ddd;
      display: none;
    }

    .bd li.current {
      display: block;
    }
  </style>

</head>
<body>
<div class="box" id="box">
  <div class="hd">
    <span class="current">体育</span>
    <span>娱乐</span>
    <span>新闻</span>
    <span>综合</span>
  </div>
  <div class="bd">
    <ul>
      <li>我是体育模块</li>
      <li>我是娱乐模块</li>
      <li class="current">我是新闻模块</li>
      <li>我是综合模块</li>
    </ul>
  </div>
</div>
<script src="common.js"></script>
<script>
	//获取最外面的div
	var box = mFun$("box");
	//获取box里面的第一个div
	var hd = box.getElementsByTagName("div")[0];
	//获取box里面的第二个div
	var bd = box.getElementsByTagName("div")[1];
	//获取所有的span标签
	var span = hd.getElementsByTagName("span");
	//获取所有的li标签
	var li = bd.getElementsByTagName("li");
	// console.log(span);
	//循环遍历每一个span 注册点击事件
	for(var k = 0; k < span.length; k++){
		//将所有的span标签添加index属性 并进行赋值
		span[k].setAttribute("index",k);
		span[k].onclick = function(){
				//第一步:当前所有的类样式都移除
				for(var i = 0; i < span.length;i++ ){
						span[i].removeAttribute("class");
				}
				//第二步:被点击的span应用此样式
				//span[1],className = "current";//#ddd
				this.className = "current";
				
				//获取到的是 span的下标
				// span[1].getAttribute("index");
				var num = this.getAttribute("index");
				console.log(num);
				//获取所有的li标签 并移除其class属性  "current"display:block
				for(var j = 0; j < li.length;j++){
					li[j].removeAttribute("class");
				}
				//当前被点击的span对应的li添加样式
				li[num].className = "current";
		}
	}
</script>
</body>
</html>

点击按钮设置div中p标签的背景颜色

<!DOCTYPE html>
<html lang="en">
	<head>
	  <meta charset="UTF-8">
	  <title>title</title>
	  <style>
		div {
		  width: 300px;
		  height: 450px;
		  border: 1px solid red;
		}
	  </style>
	</head>
	<body>
	<input type="button" value="变色" id="btn"/>
	<div id="dv">
	  <span>这是span</span>
	  <p>这是p</p>
	  <span>这是span</span>
	  <p>这是p</p>
	  <span>这是span</span>
	  <p>这是p</p>
	  <span>这是span</span>
	  <a href="http://www.baidu.com">百度</a>
	</div>
	<script src="common.js"></script>
	<script>
		//根据id属性获取指定元素注册点击事件
		mFun$("btn").onclick = function (){
			//获取div的子节点
			var divNode = mFun$("dv").childNodes;
			//遍历所有的子节点
			for(var i = 0;i < divNode.length;i++ ){
				//如果div的子节点的节点类型 等于1 并且 节点名称为大写的P
				if(divNode[i].nodeType == 1 && divNode[i].nodeName == "P" ){
					divNode[i].style.backgroundColor = "red";
				}
			}
		}
	</script>
	</body>
</html>

LW0512

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tab切换

tab切换案例实现<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } ul { list-style-type: none; } .box {
复制链接

扫一扫

专栏目录