var inputObjs = document.getElementsByTagName("input");
for (var i = 0; i < inputObjs.length; i++) {
inputObjs[i].onclick = function () {
for (var j = 0; j < inputObjs.length; j++) {
inputObjs[j].value = "哈哈";
}
this.value = "嘻嘻"
}
}
console.log(i);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.nav li {
float: left;
width: 100px;
height: 50px;
text-align: center;
line-height: 50px;
background-color: pink;
color: #fff;
cursor: pointer;
}
.nav li.active {
background-color: orange;
}
.content li {
width: 400px;
height: 300px;
display: none;
background-color: orange;
}
.content li.show {
display: block;
}
</style>
</head>
<body>
<ul class="nav">
<li data-content-id="content01" class="active">菜单1</li>
<li data-content-id="content02">菜单2</li>
<li data-content-id="content03">菜单3</li>
<li data-content-id="content04">菜单4</li>
</ul>
<ul class="content">
<li id="content01" class="show">内容1</li>
<li id="content02">内容2</li>
<li id="content03">内容3</li>
<li id="content04">内容4</li>
</ul>
<script>
document.querySelector('.nav').onclick = function (e) {
var nowLi = e.target;
document.querySelector('.nav li.active').classList.remove('active');
nowLi.classList.add('active');
document.querySelector(".content li.show").classList.remove('show');
document.querySelector("#" + nowLi.dataset.contentId).classList.add('show');
}
</script>
</body>
</html>