需要引入Jquery库
代码:
Code highlighting produced by Actipro CodeHighlighter (freeware)
http://www.CodeHighlighter.com/
<! 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 src ="Public/jquery.js" type ="text/javascript" ></ script >
< style type ="text/css" >
.tab
{
background-color : #FAFAFA ;
margin : 5px 8px ;
padding : 5px 10px ;
}
.tab p span
{
background-color : #EFEFEF ;
border : 1px solid #CCCCCC ;
cursor : pointer ;
margin-right : 6px ;
padding : 2px 5px ;
}
.tab p span.current
{
background-color : #FAFAFA ;
border-bottom-color : #fafafa ;
}
.tab p
{
border-bottom : 1px solid #CCCCCC ;
font-weight : bold ;
padding : 0 10px 2px ;
}
.tab li
{
border-bottom : 1px dotted #CCCCCC ;
padding-bottom : 3px ;
margin : 5px 0 ;
}
.tab .mhot, .tab.allhot
{
display : none ;
}
</ style >
< script type ="text/javascript" >
$(document).ready( function () {
$( " .tab span:first " ).addClass( " current " ); // 为第一个SPAN添加当前效果样式
$( " .tab ul:not(:first) " ).hide(); // 隐藏其它的UL
$( " .tab span " ).mouseover( function () {
$( " .tab span " ).removeClass( " current " ); // 去掉所有SPAN的样式
$( this ).addClass( " current " );
$( " .tab ul " ).hide();
$( " . " + $( this ).attr( " id " )).fadeIn( ' slow ' );
});
});
</ script >
</ head >
< body >
< div class ="tab" >
< p >
< span id ="tab1" > tab1 </ span > < span id ="tab2" > tab2 </ span > < span id ="tab3" > tab3 </ span ></ p >
< ul class ="tab1" >
< li > 我和我的祖国 </ 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 >
http://www.CodeHighlighter.com/
<! 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 src ="Public/jquery.js" type ="text/javascript" ></ script >
< style type ="text/css" >
.tab
{
background-color : #FAFAFA ;
margin : 5px 8px ;
padding : 5px 10px ;
}
.tab p span
{
background-color : #EFEFEF ;
border : 1px solid #CCCCCC ;
cursor : pointer ;
margin-right : 6px ;
padding : 2px 5px ;
}
.tab p span.current
{
background-color : #FAFAFA ;
border-bottom-color : #fafafa ;
}
.tab p
{
border-bottom : 1px solid #CCCCCC ;
font-weight : bold ;
padding : 0 10px 2px ;
}
.tab li
{
border-bottom : 1px dotted #CCCCCC ;
padding-bottom : 3px ;
margin : 5px 0 ;
}
.tab .mhot, .tab.allhot
{
display : none ;
}
</ style >
< script type ="text/javascript" >
$(document).ready( function () {
$( " .tab span:first " ).addClass( " current " ); // 为第一个SPAN添加当前效果样式
$( " .tab ul:not(:first) " ).hide(); // 隐藏其它的UL
$( " .tab span " ).mouseover( function () {
$( " .tab span " ).removeClass( " current " ); // 去掉所有SPAN的样式
$( this ).addClass( " current " );
$( " .tab ul " ).hide();
$( " . " + $( this ).attr( " id " )).fadeIn( ' slow ' );
});
});
</ script >
</ head >
< body >
< div class ="tab" >
< p >
< span id ="tab1" > tab1 </ span > < span id ="tab2" > tab2 </ span > < span id ="tab3" > tab3 </ span ></ p >
< ul class ="tab1" >
< li > 我和我的祖国 </ 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 >