我此处的Tab切换,标题和内容没有直接关系,还是比较方便的
html
-
- 文文真漂亮 7-7
- [发改委]文文真漂亮 7-7
- [发改委]文文真漂亮 7-7
- [发改委]文文真漂亮 7-7
- [发改委]文文真漂亮 7-7
-
- [发改委]文文文文真漂亮 7-7
- [发改委]文文文文真漂亮 7-7
- [发改委]文文文文真漂亮 7-7
-
- [发改委]文文第一美 7-7
- [发改委]文文第一美 7-7
- [发改委]文文第一美 7-7
- [发改委]文文第一美 7-7
- [发改委]文文第一美 7-7
- [发改委]文文第一美 7-7
css
ul{width:570px;height:40px; background:url(../imags/yicheng_bg.png) no-repeat;} ul li{ float:left;width:125px;height:40px; line-height:40px;} ul li a{ display:block; font-size:16px; width:123px;height:35px;font-weight:bold; text-align:center;color:#4B4848;}.occure{background: url(../imags/yicheng_bg2.png) no-repeat;display:block;}.yicheng{width:570px;height:220px; }.yicheng li{width:570px;height:220px; display:none;}.news{width:550px;height:200x; padding:5px 10px;}.news dl dd{height:35px; line-height:35px;background: url(../imags/point.png) no-repeat 7px 14px; padding-left:20px; }.news dl dd a{ display:block; font-size:14px; color:#717171; float:left; }.news dl dd a:hover{color:#0F7671; text-decoration:underline;}.news dl dd span{ display:block; font-size:14px; color:#717171; float:right; padding-right:20px; }复制代码 js
$(function(){ Tabchange(' .top', '.down', 'occure'); })function Tabchange( topname, downname, classname){ $(topname).children().mouseover(function(){ var index=$(this).index(); $(".nav_down").css('display','block'); $(downname).children(":eq("+index+")").show().siblings().hide(); $(this).addClass(classname).siblings().removeClass(classname); //alert(1); }) }复制代码 是不是很简单呢?
其实这是很久之前写的了,懒得整理,今天整理下分享给大家,有疑问的问我哦!