Tabs 滑动显示

 

html

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Transitional//EN " " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd " >
< html xmlns = " http://www.w3.org/1999/xhtml " >
< head >
< title ></ title >
< script type = " text/javascript " src = " js/jquery-1.3.2-vsdoc.js " ></ script >
< script src = " js/jquery-1.3.2.js " type = " text/javascript " ></ script >

<script src="js/js/tabs.js" type="text/javascript"></script>
    <link type="text/css" href="css/tabs.css" rel="Stylesheet" />
</ head >
< body >
< div class = " tab " >
< p >
< span id = " tab1 " > 相关文章 </ span >
< span id = " tab2 " > 本月热门 </ span >
< span id = " tab3 " > 点击排行 </ span >
</ p >
< ul class = " tab1 " >
< li >< a href = " http://www.163.com " > 相关文章 </ a ></ li >
< li > 相关文章 </ li >
< li > 相关文章 </ li >
</ ul >
< ul class = " tab2 " >
< li > 本月热门 </ li >
< li > 本月热门 </ li >
</ ul >
< ul class = " tab3 " >
< li > 点击排行 </ li >
< li > 点击排行 </ li >
< li > 点击排行 </ li >
< li > 点击排行 </ li >
< li > 点击排行 </ li >
</ ul >
</ div >
</ body >
</ html >

 

tabs.js

$(function() {
$( " .tab span:first " ).addClass( " current " );
$( " .tab ul:not(:first) " ).hide();
$( " .tab span " ).mousemove(function() {
$( " .tab span " ).removeClass( " current " );
$( this ).addClass( " current " );
$( " .tab ul " ).hide();
$( " . " + $( this ).attr( " id " )).show();
})
})

 

tabs.css

.tab{ background - color:#fafafa; margin:5px 8px; padding:5px 10px;}
.tab p{ border - bottom:1px solid #cccccc; font - weight:bold ; padding:0px 10px 2px;}
.tab p span{ background - color:#efefef; border:1px solid #cccccc; cursor:pointer; margin - right:6px; padding:2px 5px;}
.tab li{ border:1px double #cccccc; padding - bottom:3px; margin:5px 0 }
.tab .tab2,.tab .tab3{ display:none;}
.tab p span.current{ background - color:#fafafa; border - bottom - color:#fafafa;}

转载于:https://www.cnblogs.com/guide/archive/2010/03/19/1689550.html