js相关小实例——点击显示隐藏模块

最新推荐文章于 2020-06-15 17:28:10 发布

djhzn42662

最新推荐文章于 2020-06-15 17:28:10 发布

阅读量126

点赞数

文章标签： xhtml javascript ViewUI

原文链接：http://www.cnblogs.com/binbinyouli123/p/6534707.html

版权

代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px auto; padding:0px}
#fenlei{ width:500px; height:35px;}
.xiang{ float:left; width:100px; height:35px; text-align:center; line-height:35px; vertical-align:middle;}
.xiang:hover{ cursor:pointer}
.xuanxiang{ width:500px; height:300px; display:none}
#guonei{ background-color:#63C; display:block}
#guoji{ background-color:#3C9}
#tiyu{ background-color:#C36}
#yule{ background-color:#FF6}
</style>
</head>

<body>

<br />
<div id="fenlei">
    <div class="xiang" style="background-color:#63C" οnclick="showa('guonei')">国内新闻</div>
    <div class="xiang" style="background-color:#3C9" οnclick="showa('guoji')">国际新闻</div>
    <div class="xiang" style="background-color:#C36" οnclick="showa('tiyu')">体育新闻</div>
    <div class="xiang" style="background-color:#FF6" οnclick="showa('yule')">娱乐新闻</div>
</div>

<div id="guonei" class="xuanxiang">
    
</div>

<div id="guoji" class="xuanxiang">
    
</div>

<div id="tiyu" class="xuanxiang">
    
</div>

<div id="yule" class="xuanxiang">
    
</div>


<script type="text/javascript">

function showa(d)
{
    var div = document.getElementById(d);
    
    var suoyou = document.getElementsByClassName("xuanxiang");
 
    for(var i=0;i<suoyou.length;i++)
    {
        suoyou[i].style.display = "none";
    }
    
    div.style.display = "block";
    
}

</script>

</body>
</html>

结果如下：

点击国际新闻：

点击体育新闻：

转载于:https://www.cnblogs.com/binbinyouli123/p/6534707.html

djhzn42662

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js相关小实例——点击显示隐藏模块

代码：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head...
复制链接

扫一扫