javascript 点击切换 div js点击切换div内容

转载

feiry 2023-11-24 09:25:47

文章标签 javascript 点击切换 div 选项卡 html ide 文章分类 JavaScript 前端开发

对于选项卡的切换有很多种方法，这里介绍的是一种易于理解和简单的方法。JS实现对div的操作，首先就得将div给取出来，然后对该div进行操作。如果要操作的div或者其它属性有多个可以采用document.querySelectorAll()取用，注意，这里的document.querySelectorAll()取出来的是数组，而如果只需要对摸一个div取操作，则用document.querySelector()即可。document.querySelectorAll()括号里面填入的是，如果div设置的是id，便填入设置的id，这里我的选项卡的设置是 #direction ul li，所以这里括号里填入的就是 '#direction ul li'。

这里我取出我要对其操作的选项卡后，便是写JS部分了。选项卡在li中有三个选项，如何实现他们对应的div的切换呢？首先将三个选项卡对应的div全部隐藏，也就是说，一开始是没有选项卡的显示的，在进入JS后首先打开其中一个选项卡的div。再写一个for循环，用于切换选项卡选项，然后选项卡的切换是根据鼠标点击来进行切换的，而点击的时候出现的效果便是对应该选项卡的div的显现。所以对该选项卡li的onclic()进行操作，这里再来一个for循环，用于将所有的选项卡对应的div隐藏，再将点击的该选项卡的div显现出来，即aList[this.index].className = "on"(用于显现将选项卡点击是的效果)和 aDiv[this.index].className = "show"(用于显现选项卡下的div)。如此两个循环便可以实现简单的选项卡切换操作了。如下为实现代码：

<!DOCTYPE html>
<!DOCTYPE html>
<html style="background-color: rgba(225,225,225,0.2);width: 100%;height: 100%; background: url(http://3.bp.blogspot.com/-7GKG80AcwdI/TvBCefflgoI/AAAAAAAAbkw/SQ_ySS_d8gc/s1600/kobe_Bryant_0001.jpg) no-repeat fixed center center;background-size:100% 100%;">
<head>
	<title>我的网页</title>
	<!--设置css部分-->
	<style type="text/css">
	*{
	padding: 0px;
	margin:0px;
    }
	body{
	margin:0;
	padding:0;
    }

    /*第一个div的设置*/
.box1{
    width:100%;
	height:300px;
	text-align:center;
	border-radius: 1px solid black;
    background-color: rgba(225,225,225,0.1)
    }

    /*第二个div的设置*/
/*#box2{
    width:100%;
	height:600px;
	background:white;
	text-align:center;
	border-radius: 1px solid black;
    }*/

#direction{
    margin-left: 225px;
    width:896px;
    height:30px;
    padding:0px; 
    border:1px solid black;
    text-align:center;
    background-color: rgba(225,225,225,0.2)
    }
#direction ul{
	margin-top:0px;
	float:left;
	padding:0px;
	display:;
	background: #f1f1f1;
    background-color: rgba(225,225,225,0.2)
    }
#direction ul li{
    cursor: pointer;/*实现当鼠标移动至此时箭头转换成手指的操作*/
	width:100px;
	height:30px;
	line-height:30px;
	list-style:none;
	/*去点*/
	float:left;
	color:black;
	text-align:center;
	font-style:none;
	font-family:"粗体";
	background:  white;
    background-color: rgba(225,225,225,0.2)
    }
#direction ul li.on{
    background-color: #707070;
    color: white;
    font-family: "粗体";
    background-color: rgba(225,225,225,0.2)
}


#direction ul li.off{
	background-color: white;
    background-color: rgba(225,225,225,0.2)
}

#direction ul li.on:hover{
	font-family: "粗体";
	background-color: #555;
    background-color: rgba(225,225,225,0.3)
}

#direction ul li:hover{
	background-color: #555;
	color: white;
	font-family: "粗体";
    background-color: rgba(225,225,225,0.3)
}

#direction div{
	margin-left:0px;
	margin-top: 30px;
	width: 895px;
	height: 568px;
	border:1px solid black;
	text-align: center;
    background-color: rgba(225,225,225,0.2)
}
h2{
	padding: 10px;
	margin-left: 0;
	font-size: 15px;
	font-family: "粗体";
    background-color: rgba(225,225,225,0.2)
}
.hide{
	display: none;
}

.menu_li{
	margin:0px;
    border:1px solid black;
    background: #707070;
    padding: 1px;
    color: white;
}
</style>
<script type="text/javascript">
    // JS实现选项卡切换
   window.onload =function()/*当js放在head中时，需要使用window.onload ，其作用是让整个html文本读取完之后当使用到js部分时自动调用，否则js部分变在html文本中不起作用*/
   {var aList = document.querySelectorAll('#direction ul li');//获取选项页部分的li
   var aDiv = document.querySelectorAll('#direction div')//获取direction下的三个div，用于后面的对div的操作
   aList[1].className = "on";
   for(var i = 0; i<3;i++)
   {
     aList[i].index = i;
     aList[i].onclick = function(){
        for (var j = 0;j<3;j++)
        {
            aList[j].className = "off";
            aDiv[j].className = "hide";
        }
     aList[this.index].className = "on";
     aDiv[this.index].className = "show";
     }
   }
}
</script>
</head>
<body>
<!--设置上半部分div，用于存放logo和搜索栏-->
<div class ="box1"><!--设置整个上半部分的div样式-->
    <!--设置Google logo图片-->
    <img src="googlelogo.png" style="width:400px;height:100px;margin-top: 90px;">
    <br>
    <!--设置搜索栏-->
    <input type ="text" style="width:400px;height: 30px;margin-top: 50px;margin-left: 0;" placeholder="在Google中搜索，或输入网址"> <button id="myBtn" style="width:60px;height: 32px">搜索</button>
    <script>
    document.getElementById("myBtn").addEventListener("click", function(){
    alert("请连接互联网！");
    });
    </script>

</div>

<!--用于设置下半部分div，用于设置我的关注、推荐和导航栏-->
<!--设置整个下半部分的div样式-->
    <!--设置一个div，用于存放三个选项卡-->
    <div id  ="direction">
     <ul>
      <li>我的关注</li>
      <li>推荐</li>
      <li>导航</li>
     </ul>
     <!--我的关注-->
      <div class="hide">
            <h2>我的导航</h2>
            <ul>
            <li class="menu_li">百度糯米</li>
            <li class="menu_li">京东商城</li>
            <li class="menu_li">1号店</li>
            <li class="menu_li">苏宁易购</li>
            <li class="menu_li">唯品会</li>
            <li class="menu_li">当当网</li>
            <li class="menu_li">淘宝网</li>
            <li class="menu_li">微信</li>
            <li class="menu_li">斗鱼</li>
            <li class="menu_li">腾讯</li>
            <li class="menu_li">爱奇艺</li>
            <li class="menu_li">优酷网</li>
            </ul>
    </div>
     <!--推荐-->
     <div  class="show">
            <h2>请连接互联网!</h2>
            <img src="nowifi.png" style="width: 895px;height: 500px;margin-top:0;background-color: rgba(225,225,225,0.1)">
    </div>
     <!--导航-->
     <div  class = "hide">
            <h2>猜你喜欢</h2>
            <ul>
            <li class="menu_li">百度糯米</li>
            <li class="menu_li">京东商城</li>
            <li class="menu_li">1号店</li>
            <li class="menu_li">苏宁易购</li>
            <li class="menu_li">唯品会</li>
            <li class="menu_li">当当网</li>
            <li class="menu_li">淘宝网</li>
            <li class="menu_li">微信</li>
            <li class="menu_li">斗鱼</li>
            <li class="menu_li">腾讯</li>
            <li class="menu_li">爱奇艺</li>
            <li class="menu_li">优酷网</li>
            </ul>
            <h2>资讯信息</h2>
            <ul>
            <li class="menu_li">腾讯网</li>
            <li class="menu_li">央视网</li>
            <li class="menu_li">人民网</li>
            <li class="menu_li">中国网</li>
            <li class="menu_li">凤凰网</li>
            <li class="menu_li">新华网</li>
            <li class="menu_li">中关村在线</li>
            <li class="menu_li">虎扑体育</li>
            <li class="menu_li">汽车之家</li>
            <li class="menu_li">CHINADAILY</li>
            </ul>
            <h2>娱乐休闲</h2>
            <ul>
            <li class="menu_li">爱奇艺</li>
            <li class="menu_li">优酷</li>
            <li class="menu_li">土豆</li>
            <li class="menu_li">4399</li>
            <li class="menu_li">LETV</li>
            <li class="menu_li">哔哩哔哩</li>
            <li class="menu_li">起点中文网</li>
            <li class="menu_li">音悦Tai</li>
            <li class="menu_li">3DMGAME</li>
            <li class="menu_li">多玩游戏</li>
            <li class="menu_li">4399</li>
            </ul>
            <h2>购物海淘</h2>
            <ul>
            <li class="menu_li">百度糯米</li>
            <li class="menu_li">京东</li>
            <li class="menu_li">淘宝网</li>
            <li class="menu_li">爱淘宝</li>
            <li class="menu_li">天猫超市</li>
            <li class="menu_li">唯品会</li>
            <li class="menu_li">当当网</li>
            <li class="menu_li">1号店</li>
            <li class="menu_li">苏宁易购</li>
            <li class="menu_li">蘑菇街</li>
            <li class="menu_li">国美在线</li>
            </ul>
            <h2>生活周边</h2>
            <ul>
            <li class="menu_li">大众点评</li>
            <li class="menu_li">12306</li>
            <li class="menu_li">智联招聘</li>
            <li class="menu_li">天涯社区</li>
            <li class="menu_li">gan赶集</li>
            <li class="menu_li">快递100</li>
            <li class="menu_li">去哪儿网</li>
            </ul>
    </div>
</div>
</body>
</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。