JavaScript11 切换效果总结

最新推荐文章于 2022-12-03 23:29:34 发布

原创最新推荐文章于 2022-12-03 23:29:34 发布 · 223 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了一种通过JavaScript操作网页元素的样式来实现不同内容切换的方法。通过为按钮添加点击事件，控制不同div元素的显示与隐藏，实现了简单的页面内容切换效果。

demo-切换效果1

<!DOCTYPE html>

<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
display: none;
}
.show{
width: 500px;
height: 300px;
background: lightblue;
text-align: center;
font-size: 50px;
line-height: 300px;
display: block;
}
</style>
</head>
<body>
<button >国际</button>
<button >社会</button>
<div class="show">
1
</div>
<div id="">
2
</div>
<script type="text/javascript">
var btn1=document.getElementsByTagName("button");
// var btn2=document.getElementsByTagName("button")[1];
var div1=document.getElementsByTagName("div");
// var div2=document.getElementsByTagName("div")[1];
btn1[0].onclick=function(){
div1[0].className="show";
div1[1].className="";
}
btn1[1].onclick=function(){
div1[1].className="show";
div1[0].className="";
}
</script>
</body>

</html>

demo-2 切换效果2

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
display: none;
}
.show{
width: 500px;
height: 300px;
background: lightblue;
text-align: center;
font-size: 50px;
line-height: 300px;
display: block;
}
</style>
</head>
<body>
<button >国际</button>
<button >社会</button>
<div class="show">
1
</div>
<div id="">
2
</div>
<script type="text/javascript">
var btn1=document.getElementsByTagName("button");

var div1=document.getElementsByTagName("div");
//length获取数组的长度
//for 简化代码实现利用for 循环遍历数组中的按钮元素为每个按钮元素绑定事件
for (var i=0;i<btn1.length;i++) {
//给每个按钮添加自定义属性标识
btn1[i].index=i;//标记
btn1[i].onclick=function(){
//this 关键字指代的是调用当前函数的对象
// alert(this.innerText);
// alert(this.index);
//让所有的div隐藏使用for边历每一个div设置className
//让当前点击的按钮对应的div显示
for (var j=0;j<div1.length;j++){
div1[j].className=""
}
div1[this.index].className="show";
}
}
//系统自带属性
//自定义属性:开发者根据自己的需要添加的属性
</script>
</body>
</html>

demo-切换效果3

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box{

}
.box div{
display: none;
}
.box .active{
width: 500px;
height: 300px;
background: lightcoral;
font-size: 100px;
text-align: center;
line-height: 300px;
color: white;
display: block;

}

</style>
</head>
<body>
<div class="box">
<button>频道1</button>
<button>频道2</button>
<button>频道3</button>
<button>频道4</button>
<button>频道5</button>
<div class="active">1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
</div>
<script type="text/javascript">
//获取元素
var boxDiv=document.getElementsByClassName("box")[0];
var tabs=boxDiv.getElementsByTagName("button");
var divs=boxDiv.getElementsByTagName("div");
for (var i=0;i<tabs.length;i++){
//循环绑定事件
tabs[i].index=i;
tabs[i].onmouseover=function(){
for (var j=0;j<divs.length;j++){
divs[j].className="";
}
divs[this.index].className="active";
}
}
</script>

</body>
</html>