CSS实现Tab

最新推荐文章于 2024-05-15 09:45:51 发布

最新推荐文章于 2024-05-15 09:45:51 发布 · 122 阅读

文章标签：

#CSS #Java #HTML

web前端专栏收录该内容

26 篇文章

订阅专栏

1、CSS

.card_blank_73 {
	/* BACKGROUND-IMAGE:url(images/card_blank_bg_73.gif)*/; BORDER-BOTTOM: #ff7300 1px solid; overflow:hidden;
}
.card_normal_73 {
	BORDER-RIGHT: #c2c2c2 1px solid; PADDING-RIGHT: 5px; BORDER-TOP: #c2c2c2 1px solid; PADDING-LEFT: 5px;/* BACKGROUND-IMAGE: url(images/card_normal_bg_73.gif);*/ PADDING-BOTTOM: 0px; BORDER-LEFT: #c2c2c2 1px solid; WIDTH: 90px; PADDING-TOP: 2px; BORDER-BOTTOM: #ff7300 1px solid; TEXT-ALIGN: center
}
.card_down_73 {
	BORDER-RIGHT: #ff7300 2px solid; PADDING-RIGHT: 10px; BORDER-TOP: #ff7300 1px solid; PADDING-LEFT: 10px; FONT-WEIGHT: bold; FONT-SIZE: 14px;/* BACKGROUND-IMAGE: url(images/card_down_bg_73.gif);*/PADDING-BOTTOM: 0px; BORDER-LEFT: #ff7300 1px solid; WIDTH: 90px; COLOR: #333; PADDING-TOP: 3px; TEXT-ALIGN: center
}

2、实例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>tab.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="styles.css">

	<script type="text/javascript">


		function selectMenu(idv){
			document.getElementById("menu"+idv).className = "card_down_73";

		}
	</script>
  </head>

  <body>
    <table cellSpacing=0 cellPadding=0 width="100%">
			<tr>
			  <td class="card_normal_73" id="menu0" onclick="selectMenu(0)>
			  	<a href="#">Menu1</a>
			  </td>
			  <td class="card_normal_73" id="menu1" onclick="selectMenu(1)>
			  	<a href="#">Menu2</a>
			  </td>
			  <td class="card_down_73" id="menu2" onclick="selectMenu(2)>
			  	<a href="#">Menu3</a>
			  </td>
			  <td class="card_normal_73" id="menu3" onclick="selectMenu(3)>
			  	<a href="#">Menu4</a>
			  </td>
  		</tr>
  	</table>
  </body>
</html>