<!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>