最简单的tab控件,纯html

最新推荐文章于 2024-06-19 10:23:02 发布

凋零的老树

最新推荐文章于 2024-06-19 10:23:02 发布

阅读量6.2k

点赞数

分类专栏：技术文章标签： function xhtml html javascript menu browser

本文链接：https://blog.csdn.net/kongxiangli/article/details/4046005

版权

技术专栏收录该内容

74 篇文章 9 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

.tab ul{
margin:0;
margin-left: 10px; /*margin between first menu item and left browser edge*/
padding: 0;
list-style: none;
}

.tab li{
display: inline;
margin: 0 2px 0 0;
padding: 0;
text-transform:uppercase;
}

.tab a{
float: left;
display: block;
font: bold 11px Arial;
color: white;
text-decoration: none;
margin: 0 1px 0 0; /*Margin between each menu item*/
padding: 5px 10px;
background-color: black; /*Brown color theme*/
border-top: 1px solid white;
}

.tab a:hover{
/*background-color: #D25A0B;*/ /*Brown color theme*/
color: white;
}

.tab a.selected{ /*currently selected tab*/
background-color: #D25A0B; /*Brown color theme*/
color: white;
border-color: #D25A0B; /*Brown color theme*/
}

-->
</style>

function ClearElement()
{
   var list = document.getElementsByTagName("a");
   for (var i=0;i<list.length;i++)
   {
     list[i].style.backgroundColor = "";
   }
}

function getsrcElement(oType)
{
    var o = event.srcElement;
    while (o.tagName != oType)
{
    o = o.parentElement;
}
    return o;
}
</script>

</head>

</body>
</html>

凋零的老树

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
最简单的tab控件,纯html

http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">http://www.w3.org/1999/xhtml" xml:lang="en">.tab{padding: 0;width: 100%;border-bottom: 5px solid #D25A0B;background: transparent;voice-family: "/
复制链接

扫一扫

专栏目录