tab樣式點擊切換按鈕

1.css

<style type="text/css">
	.tog{
		background-color: rgb(70, 130, 180);
		color:white;
		width: 100%;
		font-size: 22px;
	} 
</style>

2.html

<body style="margin: 0px;padding: 0px;">
	<table class="tog">
		<tr align="center">
			<td id="one" style="background-color: rgb(12, 66, 112);">
				按鈕按鈕1
			</td>
			<td id="two">
				按鈕按鈕2
			</td>
		</tr>
	</table>
	<div id="div1" style="display:block">
		按鈕1
	</div>
	<div id="div2" style="display: none;">
		按鈕2
	</div>
</body>

3.js

<script type="text/javascript">
	$("#one").click(function(){
		$(this).css("background-color","rgb(12, 66, 112)");
		$("#two").css("background-color","rgb(70, 130, 180)");
		$("#div1").show();
		$("#div2").hide();
	})
	$("#two").click(function(){
		$(this).css("background-color","rgb(12, 66, 112)");
		$("#one").css("background-color","rgb(70, 130, 180)");
		$("#div1").hide();
		$("#div2").show();
	})
</script>
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章