方法一：（如图）
代码
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="jquery.js"></script> <style> body{ font-family: ‘Microsoft YaHei‘;} body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td ,a,i{ margin:0px; padding:0px; text-decoration: none; font-style:normal; } li{list-style:none;} .leftsidebar{width:630px;height: 314px;background: #fff;margin-bottom: 18px;border:solid 1px #e8e8e8;box-shadow: 3px 3px 3px #ebebeb;} .leftsidebar .left-top{width:630px;height: 60px;background: url(../img/c3icon.png) no-repeat 530px 15px; } .leftsidebar .left-top img{margin-top:14px;margin-left:16px;float:left;} .leftsidebar .left-top a{font-size:20px;color:#000;margin-left:10px;width:400px;height: 30px;float:left;text-align: left;line-height: 30px;margin-top:14px;} .left-center ul{font-size:16px;color:#000;margin-left:16px;width:590px;margin-bottom: 12px;border-bottom: 1px solid #bababa; height: 37px;} .left-center ul li{float:left;height: 36px;line-height: 36px;text-align: center;} .left-center ul li a{font-size:16px;color:#000;} .left-center ul li a{ display: inline-block; padding: 0px 30px; } .left-center ul li.selectTag a,.rightsidebar .c ul li.selectTag a{ border-bottom: 2px solid #1369c0; color:#1369c0; height: 36px; line-height: 36px; position: relative; z-index:999; top: 0px; } .left-center ul li.selectTag a,.rightsidebar .c ul li.selectTag{background: yellow;} /*.selectTag_1{ border-bottom: 2px solid #1369c0; color:#1369c0; height: 36px; line-height: 36px; position: relative; z-index:999; top: 0px; }*/ .left-bottom ul li{ width:590px;height: 36px;background: url(../img/dian_03.png) no-repeat 0px 15px;margin-left:16px;margin-top:7px;} .left-bottom ul li a{display:block;height: 36px; width:500px;margin-left:12px;font-size:14px;color:#000;text-align:left;line-height: 36px;overflow: hidden;} .left-bottom ul li i{font-size:10px;color:#a4a4a4;margin-right:20px;float:right;margin-top:-24px;} </style> </head> <body> <!--最新要闻--> <div class="leftsidebar"> <div class="left-top"><img src="img/c1icon.png" alt=""><a href="">最新要闻</a></div> <div class="left-center"> <ul> <li id="zxyw1" onclick="setTab_ds(‘zxyw‘,1,4);" class="selectTag"><a href="javascript:void(0);">税务动态</a></li> <li id="zxyw2" onclick="setTab_ds(‘zxyw‘,2,4);"><a href="javascript:void(0);">盟市动态</a></li> <li id="zxyw3" onclick="setTab_ds(‘zxyw‘,3,4);"><a href="javascript:void(0);">基层建设</a></li> <li id="zxyw4" onclick="setTab_ds(‘zxyw‘,4,4);"><a href="javascript:void(0);">媒体报道</a></li> </ul> </div> <div> <div class="left-bottom" id="g5_zxyw_1" style="display:block;"> <ul> <li><a href="">1税务总局：将税收“大礼包”及时足额送到每一名纳税人…</a><i>08-04</i></li> <li><a href="">税务总局：将税收“大礼包”及时足额送到每一名纳税人…</a><i>08-04</i></li> <li><a href="">税务总局：将税收“大礼包”及时足额送到每一名纳税人…</a><i>08-04</i></li> <li><a href="">税务总局：将税收“大礼包”及时足额送到每一名纳税人…</a><i>08-04</i></li> <li><a href="">税务总局：将税收“大礼包”及时足额送到每一名纳税人…</a><i>08-04</i></li> </ul> </div> <div class="left-bottom" id="g5_zxyw_2" style="display:none;"> <ul> <li><a href="">2税务总局：将税收“大礼包”及时足额送到每一名纳税人…</a><i>08-04</i></li> <li><a href="">税务总局：将税收“大礼包”及时足额送到每一名纳税人…</a><i>08-04</i></li> <li><a href="">税务总局：将税收“大礼包”及时足额送到每一名纳税人…</a><i>08-04</i></li> <li><a href="">税务总局：将税收“大礼包”及时足额送到每一名纳税人…</a><i>08-04</i></li> <li><a href="">税务总局：将税收“大礼包”及时足额送到每一名纳税人…</a><i>08-04</i></li> </ul> </div> <div class="left-bottom" id="g5_zxyw_3" style="display:none;"> <ul> <li><a href="">3税务总局：将税收“大礼包”及时足额送到每一名纳税人…</a><i>08-04</i></li> <li><a href="">税务总局：将税收“大礼包”及时足额送到每一名纳税人…</a><i>08-04</i></li> <li><a href="">税务总局：将税收“大礼包”及时足额送到每一名纳税人…</a><i>08-04</i></li> <li><a href="">税务总局：将税收“大礼包”及时足额送到每一名纳税人…</a><i>08-04</i></li> <li><a href="">税务总局：将税收“大礼包”及时足额送到每一名纳税人…</a><i>08-04</i></li> </ul> </div> <div class="left-bottom" id="g5_zxyw_4" style="display:none;"> <ul> <li><a href="">4税务总局：将税收“大礼包”及时足额送到每一名纳税人…</a><i>08-04</i></li> <li><a href="">税务总局：将税收“大礼包”及时足额送到每一名纳税人…</a><i>08-04</i></li> <li><a href="">税务总局：将税收“大礼包”及时足额送到每一名纳税人…</a><i>08-04</i></li> <li><a href="">税务总局：将税收“大礼包”及时足额送到每一名纳税人…</a><i>08-04</i></li> <li><a href="">税务总局：将税收“大礼包”及时足额送到每一名纳税人…</a><i>08-04</i></li> </ul> </div> </div> </div> <!--最新要闻--> </body> <!--切换js--> <script type="text/javascript"> //tab5л tab切换部分 function setTab_ds(name,cursel,n){ for(i=1;i<=n;i++){ var menus=document.getElementById(name+i); var cons=document.getElementById("g5_"+name+"_"+i); menus.className=(i==cursel?"selectTag":""); cons.style.display=(i==cursel?"block":"none"); } } </script> <!--切换js--> <!--点击切换部门背景色--> <script> $(function(){ $(".lasi_left ul li").click(function(){ $("this").css("background","#e6b300").siblings().css("background","#0abaf3") }) }) </script> <!--点击切换部门背景色--> </html>
方法二：（如图）
代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>切换</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <style> *{ margin: 0; padding: 0; list-style: none; } .box{ width:600px; height: 400px; margin: 20px auto; } .hd{ height: 60px; border: 1px solid blue; } .hd li{ width: 120px; height: 40px; margin-top: 10px; border: 1px solid blue; text-align: center; line-height: 40px; float: left; margin-left: 10px; } .hd li.on, .hd li:hover{ background-color: blue; color: #fff; } .bd li{ width: 600px; height: 300px; border: 1px solid blue; display: none; } .bd li:first-child{ display: block; } </style> </head> <body> <div class="box"> <ul class="hd"> <li class="on" data-id=‘t1‘>音乐</li> <li data-id=‘t2‘>喜剧</li> <li data-id=‘t3‘>新闻</li> </ul> <ul class="bd"> <li id="t1">音乐内容</li> <li id="t2">喜剧内容</li> <li id="t3">新闻内容</li> </ul> </div> </body> <script type="text/javascript"> /* $(".hd li").click(function(){ var idx = $(this).index(); $(".bd li").eq(idx).show().siblings().hide() $(this).addClass("on").siblings().removeClass("on") })*/ $(".hd li").click(function(){ var id = $(this).attr("data-id"); $(this).addClass("on").siblings().removeClass("on") $(".bd li").hide() $(".bd #"+id).show(); }) /*var li = document.querySelectorAll(".hd li"); for (var i=0;i<li.length; i++) { (function(index){ li[index].onclick = function(){ // 所有都没有了激活 for (var j=0; j<li.length; j++) { li[j].className = ""; } //当前这个有了激活 li[index].className = "on" // 所有都隐藏 var con = document.querySelectorAll(".bd li"); for (var j=0; j<li.length; j++) { con[j].style.display = "none"; } con[index].style.display = "block" } })(i) }*/ </script> </html>
方法三：（如图）
代码：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <script src="jquery.js"></script> <script> $(function(){ $(".tab-item").mouseenter(function(){ $(this).addClass("active").siblings().removeClass("active"); var idx=$(this).index(); $(".main").eq(idx).addClass("selected").siblings().removeClass("selected"); }) }) </script> <style> *{ padding:0px; margin:0px; } a{text-decoration: none;} ul{ list-style:none; } .wrapper{ width:1000px; height: 475px; margin:0 auto; } ul.tab li{ width:100px; height: 32px; line-height: 32px; text-align: center; float:left; } ul.tab li a{ color:#000; } .products .main{ float:left; display: none; } .main{ width:100%; height: 200px; background: green; } .products .main.selected{ display: block; } .tab li.active{ background: #ccc; } .tab li.active a{ color:#fff; } </style> </head> <body> <div class="wrapper"> <ul class="tab"> <li class="tab-item active"><a href="#">国际大牌</a></li> <li class="tab-item"><a href="#">国妆名牌</a></li> <li class="tab-item"><a href="#">清洁用品</a></li> <li class="tab-item"><a href="#">男士精品</a></li> </ul> <div class="products"> <div class="main selected"> 1 </div> <div class="main"> 2 </div> <div class="main"> 3 </div> <div class="main"> 4 </div> </div> </div> </body> </html>