<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0 auto;
padding: 0;
}
.a{
width: 200px;
height: 80px;
text-align: center;
line-height: 80px;
background-color: red;
color: white;
}
ul{
list-style: none;
overflow: hidden;
}
li{
width: 180px;
height: 40px;
text-align: center;
line-height: 40px;
color: blue;
background-color: #008000;
}
#di2{
width: 800px;
height: 300px;
text-align: center;
line-height: 40px;
margin-top: 50px;
border: 1px solid red;
}
.di21{
width: 198px;
height: 300px;
text-align: center;
line-height: 40px;
border: 1px solid red;
float: left;
}
.di22{
width: 198px;
height: 220px;
text-align: center;
line-height: 40px;
border: 1px solid red;
float: left;
}
.c{
width: 200px;
height: 80px;
text-align: center;
line-height: 80px;
float: left;
background-color: red;
}
#di3{
width: 400px;
height: 80px;
border: 1px solid red;
}
.d31{
width: 100px;
height: 80px;
float: left;
text-align: center;
line-height: 80px;
}
#e1{
width: 450px;
height: 400px;
border: 1px solid red;
text-align: center;
line-height: 80px;
display: block;
}
#e2{
width: 450px;
height: 400px;
border: 1px solid red;
text-align: center;
line-height: 80px;
display: none;
}
#e3{
width: 450px;
height: 400px;
border: 1px solid red;
text-align: center;
line-height: 80px;
display: none;
}
#e4{
width: 450px;
height: 400px;
border: 1px solid red;
text-align: center;
line-height: 80px;
display: none;
}
#f1{
width: 400px;
height: 5px;
border: 1px solid #6610F2;
margin-top: 100px;
}
#ff{
width: 0px;
height: 5px;
background-color: red;
float: left;
transition: 5s;
}
#h1{
width: 200px;
height: 100px;
border: 1px solid red;
text-align: center;
line-height: 80px;
color: black;
}
.h11{
width: 100px;
height: 40px;
text-align: center;
line-height: 40px;
background-color: red;
color: black;
float: left;
}
.h12{
width: 100px;
height: 20px;
text-align: center;
line-height: 20px;
background-color: blue;
color: black;
float: left;
}
</style>
</head>
<body>
<div class="a" onclick="a('a1')">标题1</div>
<ul id="a1" style="height: 0px;">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
<div class="a" onclick="a('a2')">标题2</div>
<ul id="a2" style="height: 0px;">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
<div class="a" onclick="a('a3')">标题3</div>
<ul id="a3" style="height: 0px;">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
<div id="di2">
<div class="di21">
<div class="c" onmousemove="c('c1')">标题</div>
<div class="di22">
<ul id="c1" style="height: 0px;">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
</div>
</div>
<div class="di21">
<div class="c" onmousemove="c('c2')">标题</div>
<div class="di22">
<ul id="c2" style="height: 0px;">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
</div>
</div>
<div class="di21">
<div class="c" onmousemove="c('c3')">标题</div>
<div class="di22">
<ul id="c3" style="height: 0px;">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
</div>
</div>
<div class="di21">
<div class="c" onmousemove="c('c4')">标题</div>
<div class="di22">
<ul id="c4" style="height: 0px;">
<li>内容1</li>
<li>内容2</li>
<li>内容3</li>
</ul>
</div>
</div>
</div>
<div id="di3">
<div class="d31" style="background-color: blue;" onclick="dd('e1')">
国际新闻
</div>
<div class="d31" style="background-color: #17A2B8;" onclick="dd('e2')">
国内新闻
</div>
<div class="d31" style="background-color: #721C24;" onclick="dd('e3')">
体育新闻
</div>
<div class="d31" style="background-color: #C69500;" onclick="dd('e4')">
娱乐新闻
</div>
</div>
<div id="e1" style="background-color: blue;" name="ee">
国际新闻
</div>
<div id="e2" style="background-color: #17A2B8;" name="ee">
国内新闻
</div>
<div id="e3" style="background-color: #721C24;" name="ee">
体育新闻
</div>
<div id="e4" style="background-color: #C69500;" name="ee">
娱乐新闻
</div>
<div id="f1">
<div id="ff"></div>
</div>
<div id="h1">
<div class="h11">标题
<div class="h12">内容</div>
<div class="h12">内容</div>
<div class="h12">内容</div>
</div>
<div class="h11">标题
<div class="h12">内容</div>
<div class="h12">内容</div>
<div class="h12">内容</div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
/*function a(x){
var sj1 = document.getElementsByTagName("ul");
var sj0 = document.getElementById(x); //x如果加引号变成字符串
if(sj0.style.height == "0px"){
for(var i = 0;i<sj1.length;i++){
sj1[i].style.height = "0px";
}
sj0.style.transition = "1s";
sj0.style.height = "120px";
}else{
sj0.style.height = "0px";
}
}*/
function c(z){
var sj2 = document.getElementsByTagName("ul");
var sj3 = document.getElementById(z);
if(sj3.style.height == "0px"){
for(var ii = 0;ii<sj2.length;ii++){
sj2[ii].style.height = "0px";
}
sj3.style.transition = "1s";
sj3.style.height = "120px";
}else{
sj3.style.height = "0px";
}
}
function dd(f){
var sj4 = document.getElementById(f);
var sj5 = document.getElementsByName("ee")
for(var i = 0;i<sj5.length;i++){
sj5[i].style.display = "none";
}
sj4.style.transition = "1s";
sj4.style.display = "block";
}
setTimeout("tt()",2000)
function tt(){
document.querySelector("#ff").style.width = "400px";
}
</script>
浙公网安备 33010602011771号