<style type="text/css"> *{margin:0;padding:0;} body{background:url("images/bg.png");font-size:12px;font-family:"微软雅黑";color:#666;} img{border:0;} /*mini start*/ .mini{698px;height:500px;margin:22px auto;} .mini .m_header{698px;height:30px;} .mini .m_header a{float:left;} .mini .m_header span{float:left;line-height:30px;margin-left:20px;} .mini .m_nav{698px;height:32px;margin-top:13px} .mini .m_nav ul li{list-style:none;float:left;line-height:32px;padding:0 16px;font-size:14px;color:#0B3B8C;} .mini .m_nav ul .sel{background:url("images/icon.png") no-repeat 25px -433px;color:#000;font-weight:bold;} .mini .m_content{698px;height:394px;margin-top:10px;} .mini .m_content .list{display:none;} .mini .m_content .show{display:block;} /*end mini*/ </style> <body> <!--mini start--> <div class="mini"> <div class="m_header"> <a href="#"><img src="images/minilogo.png" alt="软件学院" width="150" height="30"/></a> <span>10月29日 周三 中山市 小雨14°C</span> </div> <div class="m_nav"> <ul id="m_ul"> <li class="sel">新闻</li> <li>视频</li> <li>财经</li> <li>娱乐</li> <li>时尚</li> <li>体育</li> <li>科技</li> <li>汽车</li> <li>游戏</li> <li>军事</li> <li>微视</li> </ul> </div> <div class="m_content"> <div class="list show"><img src="images/1.jpg" alt="" width="674" height="394" /></div> <div class="list"><img src="images/2.jpg" alt="" width="674" height="394" /></div> <div class="list"><img src="images/3.jpg" alt="" width="674" height="394" /></div> <!--这里有很多的list--> </div> </div> <!--end mini--> <script type="text/javascript" src="js/jquery-1.11.1.min.js"></script> <script type="text/javascript"> $("#m_ul").find("li").hover(function(){ $(this).addClass("sel").siblings().removeClass("sel"); var _index = $(this).index(); $(".list").hide().eq(_index).show(); }); </script> </body>
