tab切换

我此处的Tab切换,标题和内容没有直接关系,还是比较方便的

html

<ul class="top">
					<li class="occure"><a href="#">文文1</a></li>
					<li><a href="#">文文2</a></li>
					<li><a href="#">文文3</a></li>
				</ul>
				<ol class="down yicheng">
					<li style=" display:block;">
						<div class="news">
							<dl>
								<dd><a href="#">文文真漂亮</a><span>7-7</span></dd>
								<dd><a href="#">[发改委]文文真漂亮</a><span>7-7</span></dd>
								<dd><a href="#">[发改委]文文真漂亮</a><span>7-7</span></dd>
								<dd><a href="#">[发改委]文文真漂亮</a><span>7-7</span></dd>
								<dd><a href="#">[发改委]文文真漂亮</a><span>7-7</span></dd>

							</dl>
						</div>
					</li>
					<li>
						<div class="news">
							<dl>
								<dd><a href="#">[发改委]文文文文真漂亮</a><span>7-7</span></dd>
								<dd><a href="#">[发改委]文文文文真漂亮</a><span>7-7</span></dd>

								<dd><a href="#">[发改委]文文文文真漂亮</a><span>7-7</span></dd>
							</dl>
						</div>
					</li>
					<li>
						<div class="news">
							<dl>
								<dd><a href="#">[发改委]文文第一美</a><span>7-7</span></dd>
								<dd><a href="#">[发改委]文文第一美</a><span>7-7</span></dd>
								<dd><a href="#">[发改委]文文第一美</a><span>7-7</span></dd>
								<dd><a href="#">[发改委]文文第一美</a><span>7-7</span></dd>
								<dd><a href="#">[发改委]文文第一美</a><span>7-7</span></dd>
								<dd><a href="#">[发改委]文文第一美</a><span>7-7</span></dd>
							</dl>
						</div>
					</li>
				</ol>

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);
	})
	}

是不是很简单呢?

其实这是很久之前写的了,懒得整理,今天整理下分享给大家,有疑问的问我哦!