很漂亮的TAB标签切换CSS.docx
文本预览下载声明
/html/JavaScript/ExtJs/ 技术教程网 FenGFly.COmwindows 2008,WWW.F HTML:
复制代码 代码如下:
div class=tab
div id=tabsK
ul id=menu4
li onclick=settab(4,0) class=hovera title=最新更新span最新更新/span/a/li
li onclick=settab(4,1)a title=企业新闻span企业新闻/span/a/li
li onclick=settab(4,2)a title=行业新闻span行业新闻/span/a/li
li onclick=settab(4,3)a title=专栏文章span专栏文章/span/a/li
li onclick=settab(4,4)a title=科技新闻span科技新闻/span/a/li
/ul
/div
div class=tab2 id=main4
ul class=block/ul
ul /ul
ul /ul
ul /ul
ul /ul
/div
/div
CSS:
复制代码 代码如下:
#tabsK {
float:left;
width:100%;
line-height:normal;
border-bottom:1px solid #54545C;
}
#tabsK ul {
margin:0;
padding:10px 10px 0 10px;
list-style:none;
}
#tabsK li {
display:inline;
margin:0;
padding:0;
cursor:pointer;
}
#tabsK a {
float:left;
background:url(image/tableftK.gif) no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsK a span {
float:left;
display:block;
background:url(image/tabrightK.gif) no-repeat right top;
padding:8px 16px 4px 6px;
color:#FFF;
}
#tabsK a span {float:none;}
/* End IE5-Mac hack */
#tabsK a:hover span {
cursor:pointer;
color:#FFF;
background-position:100% -42px;
}
#tabsK a:hover {
background-position:0% -42px;
cursor:pointer;
}
#tabsK .hover a
{
background-position:0% -42px;
}
#tabsK .hover span
{
background-position:100% -42px;
}
.tab2 ul
{
display:none;
list-style-type:none;
height:560px;
}
.tab2 ul li
{
text-align:left;
line-height:20px;
text-indent:1em;
}
.tab2 .block
{
display:block;
}
JS:
复制代码 代码如下:
script language=javascript!--
function settab(m,n){
var tli=document.getElementById(menu+m).getElementsByTagName(li);
var mli=document.getElementById(main+m).getElementsByTagName(ul);
for(i=0;itli.length;i++){
tli[i].className=i==n?hover:;
mli[i].style.display=i==n?block:none;
}
}
// --/script
截图和用到的两张图片：
/html/PhotoShop/
/QQ/QQhead/ WWＷ.ＦＥNGＦＬY.ＣＯMFengF 雨枫 技术 教程 网
原文来自：雨枫技术教程网
原文网址：/plus/view-165094-1.html
显示全部