|
|
@@ -35,6 +35,12 @@
|
|
|
height: 200px;
|
|
|
border: 1px solid #ccc;
|
|
|
}
|
|
|
+ .actived{
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+ .choice{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -45,22 +51,27 @@
|
|
|
<li>体育</li>
|
|
|
</ul>
|
|
|
<div id="div1">
|
|
|
- <div>时事内容</div>
|
|
|
- <div>新闻内容</div>
|
|
|
- <div>体育内容</div>
|
|
|
+ <div class="actived choice">时事内容</div>
|
|
|
+ <div class="actived">新闻内容</div>
|
|
|
+ <div class="actived">体育内容</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<script>
|
|
|
var btn = document.getElementById('btn')
|
|
|
var btns = btn.getElementsByTagName('li')
|
|
|
-
|
|
|
+ var content = document.getElementsByClassName('actived')
|
|
|
+ console.log(content)
|
|
|
for(var i=0;i<btns.length;i++){
|
|
|
+ btns[i].index = i
|
|
|
btns[i].onclick = function(){
|
|
|
//this 点谁就是谁
|
|
|
for(var j=0;j<btns.length;j++){
|
|
|
btns[j].className = ''
|
|
|
+ content[j].className = 'actived'
|
|
|
}
|
|
|
this.className = 'selected'
|
|
|
+ console.log(this.index)
|
|
|
+ content[this.index].className = 'actived choice'
|
|
|
}
|
|
|
}
|
|
|
|
zsydgithub