程序博客网 > 王者荣耀点券充值淘宝

javascript为节点设置样式

来源：互联网发布：王者荣耀点券充值淘宝编辑：程序博客网时间：2024/05/18 05:20

开始之前先上几张效果图：

好的两张图片已经说明了我要讲解的内容是什么：

接下来我直接上传代码，备注在代码里~~~~

图片中的Body部分:

<body class="main">

<div class="div-Box">

<div name='select' class="div-Box-selected">选项A</div>
<div name='select' class="div-Box-noselected">选项B</div>
<div name='select' class="div-Box-noselected">选项C</div>
<div name='select' class="div-Box-noselected">选项D</div>
</div>
</body>

图片中Javascript部分:

<script type="text/javascript">
//1.加载完毕后执行如果不懂是什么意思建议写上
window.onload = function(){
//2.首先什么都不用说我们要获取到所有的选项那么为了方便我们直接给他们加上一个name属性
var selectArray = document.getElementsByName("select");
//3.给每个div绑定一个点击事件 index 是div在selectArray的索引
for(var index in selectArray){
selectArray[index].onclick = function(){
//4.1点中后第一步将选中状态的节点的样式设置为“未选中状态”
document.getElementsByClassName("div-Box-selected")[0].className = "div-Box-noselected";
//4.2第二步为点中的节点添加选中状态的样式
this.className = "div-Box-selected";
}
}
}
</script>

我使用的Css源码（只写了一个Css）:

.main{
margin: 0px;
padding: 0px;
}

.div-Box{
margin-top: 200px;
width: 100%;
height: 60px;
line-height: 60px;
font-size: 20px;
color: white;
text-align: center;
font-family: "微软雅黑";
}

.div-Box-selected{
float: left;
height: 100%;
margin-top: 200px;
width: 20%;
margin-left: 4%;
background-color: red;
cursor: pointer;
}

.div-Box-noselected{
float: left;
height: 100%;
margin-top: 200px;
width: 20%;
margin-left: 4%;
background-color: green;
cursor: pointer;
}

OK，本篇博客就到这里，祝大家在前端的道路上越滚越远~~~

附上资源链接~~~

http://download.csdn.net/download/microsoftdesigner/10000360

阅读全文

0 0

王者荣耀点券充值淘宝

王者荣耀点券充值淘宝

原创粉丝点击

热门问题 老师的惩罚人脸识别我在镇武司摸鱼那些年重生之率土为王我在大康的咸鱼生活盘龙之生命进化天生仙种凡人之先天五行春回大明朝姑娘不必设防，我是瞎子靠近李圣杰靠近女董事长靠近中文音译柯华的女儿柯山夜话柯震东3cm 柯震东出车祸柯震东出席尾牙柯震东打人柯震东今日台北出庭柯震东女友黄庆宜科比狂想的旅程科比武汉行科林费斯脱臼送医科特非乐按摩器科学怪鱼国语科学家力挺转基因科祖希可爱淘作品集可不可以不勇敢简谱可可草可口可乐爽食赢天下可乐三国官网可惜不是你朗琅克劳匹舒斯克劳匹舒斯在哪克雷泽的神秘宝箱克里顿的遗迹克里斯蒂安梅耶尔克伦军克谢妮雅刻刻瘦减肥网客房现陌生人洗澡课桌中间隔着一片海肯德基让你心惊肉跳空r20052 空间道具狗仔队空间留言板寄语闪图空降兵重火出击空军蓝翔联合培训空手小霸王41