`
leifeng2
  • 浏览: 139171 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

CSS 选项卡

    博客分类：
  • css
 
阅读更多

<!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>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<title></title>  
<style type="text/css">  
body,td,th {font-size: 12px;}  
body {margin: 0px;margin: 0px;}  
.clear{ clear:both;}  
a{blr:expression(this.onFocus=this.blur())}/*去掉a标签的虚线框，避免出现奇怪的选中区域*/
:focus{outline:0;}
.test{width:100%; margin-top:50px; height:250px; border:1px solid red;}  
.test ul{list-style:none; margin:0px;margin-top:4px;padding:0px; border-bottom:1px solid red; height:30px;}  
.test li{float:left;width:100px;margin-left:5px;line-height:30px; border:1px solid red; border-bottom:0px;}  
.test a{display:block;text-align:center;height:30px;}  
.test a:link{color:#000000;text-decoration:none;}  
.test a:visited{color:#000000;text-decoration:none;}  
.test a:hover{text-decoration:none;}   
.onselect{font-weight:bold;background:url(images/spritebg.png)  no-repeat 0px 12px;}
.noselect{font-weight:normal;background:normal} 
</style>  
<script>
<!--
function setTab(obj,tagName){
 var list=document.getElementsByName(tagName);
 for(i=0;i<list.length;i++){
  list[i].className="noselect";  
 }
 obj.className="onselect"; 
}
</script>
</head>  
<body>  
<div class="test">  
     <ul>  
         <li><a href="#" onclick="setTab(this,'tablink')" name="tablink" class="onselect">首页</a></li>  
         <li><a href="#" onclick="setTab(this,'tablink')" name="tablink">产品介绍</a></li>  
         <li><a href="#" onclick="setTab(this,'tablink')" name="tablink">服务介绍</a></li>  
         <li><a href="#" onclick="setTab(this,'tablink')" name="tablink">技术支持</a></li>  
         <li><a href="#" onclick="setTab(this,'tablink')" name="tablink">立刻购买</a></li>  
         <li><a href="#" onclick="setTab(this,'tablink')" name="tablink">联系我们</a></li>  
     </ul>  
     <div class="clear"></div>
     <div class="clear">1121</div>   
</div>  
</body>  
</html> 

 

 

分享到：
CSS 菜单2
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics