<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>test</title>
<style>
li {
list-style-type: none;
}
ul li {
width: 300px;
height: 20px;
border: 1px solid #663333;
margin-bottom: 5px;
text-align: center;
}
#div1 {
width: 300px;
height: 100px;
margin-left: 40px;
border: 1px solid rebeccapurple;
}
#div2 {
width: 150px;
height: 100px;
background-color: #954b4b;
margin: 0 auto;
text-align: center;
line-height: 100px;
color: white;
display: none;
}
</style>
</head>
<body>
<div id="qq_talk_seach_head">
<span></span>
</div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div id="div1">
<div id="div2"></div>
</div>
<script>
window.onload = function () {
var ul_li = document.getElementsByTagName('li');
var div1 = document.getElementById('div1');
var div2 = document.getElementById('div2');
function getStyle(obj, attr) {
if (obj.currentStyle) {
//alert(obj.currentStyle[attr]);
return obj.currentStyle[attr];
}
else {
return getComputedStyle(obj, false)[attr];
}
}//
for (var i = 0; i < ul_li.length; i++) {
ul_li[i].index = i;
ul_li[i].onclick = function () {
if (getStyle(div2, 'display') === 'none') {
div2.style.display = 'block';
}
//debugger;
if (!this.getAttribute('index')) {
this.setAttribute('index', this.index);
var new_span = document.createElement('span');
var new_span_text = document.createTextNode(ul_li[this.index].innerHTML);
div2.appendChild(new_span);
new_span.appendChild(new_span_text);
new_span.className = 'span_class';
}
var t_lenght = document.getElementsByClassName('span_class');
for (var j = 0; j < t_lenght.length; j++) {
t_lenght[j].style.display = 'none';
}
t_lenght[this.index].style.display = 'block';
console.log(t_lenght.length);
}
}
div2.onclick = function () {
if (getStyle(div2, 'display') === 'block') {
div2.style.display = 'none';
}
}
}
</script>
</body>
</html>
添加回答
举报
0/150
提交
取消