js实现简单的Tap
<style type="text/css">
#bodyDiv
{
border:1px solid #0094ff;
margin:50px auto;
width:460px;
height:300px;
background-color:#0094ff;
}
ul
{
width:460px;
border:1px solid #0094ff;
padding:0px;
margin:5px auto 0px auto;
list-style-type:none;
text-align:center;
}
li
{
border:1px solid #fff;
margin:0px 0px;
background-color:#0094ff;
color:#fff;
display:inline-block;/*相当于浮动*/
padding:0px;
cursor:pointer;
line-height:30px;
width:50px;
height:30px;
}
#contentDiv
{
border:1px solid#fff;
margin:0px 2px;
background-color:#fff;
}
.clickLI
{
background-color:#ffffff;
color:#000000;
border-bottom:1px solid #fff;
position:relative;
top:1px;
}
</style>
<script type="text/javascript">
function gel(id) { return document.getElementById(id); }
//添加新闻数组
var arrNew = [{ "title": "体育", "content": "刘翔摔倒的" },
{ "title": "科普", "content": "我爱广州小蛮腰" },
{ "title": "军事", "content": "我爱北京天安门" },
{ "title": "科技", "content": "我爱广州天河城" },
{ "title": "社会", "content": "我爱广州小蛮腰12345" }];
window.onload = function () {
pangyu();
gel("ulNews").firstElementChild.onclick();//指定第一个LI标签在页面加载完成后出现
}
//初始化数组将数组绑定到li中
function pangyu() {
var textul = gel("ulNews");//获取ul标签的节点
for (var i = 0; i < arrNew.length; i++) { //遍历数组
var textli = document.createElement("li"); //自定义创建Li标签
textli.setAttribute("index", i); //为这个li标签设置自定义属性
textli.innerHTML = arrNew[i].title;//把从数组中获取到的标题名称赋给li标签里面
textul.appendChild(textli);//把li标签添加ul节点中
textli.onclick = lionclick;//为每个Li标签设置点击事件
}
}
function lionclick() {//当用户点击某个LI标签的时候 触发该事件
var ulsli = gel("ulNews").children;//获取这个ul标签里面的每个节点文本内容 并且过滤掉li标签的元素
for (var i = 0; i < ulsli.length; i++) {//遍历这个ul标签的子节点
ulsli[i].className = "";//为遍历到每个li标签添加名字
}
this.className = "clickLI";//根据触发的这个li标签name属性 找该样式
var index = this.getAttribute("index");//获取这个li标签的自定义属性
gel("contentDiv").innerHTML = arrNew[index].content;//根据这个自定义属性在数组中找到内容然后付给这个div中
}
</script>
</head>
<body>
<div id="bodyDiv">
<ul id="ulNews">
</ul>
<div id="contentDiv"></div>
</div>
</body>
