<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery製作簡單選項卡</title>
<style type="text/css">
.block{border:1px solid #999999;
width:200px;
height:100px;
display:none;
}
td{cursor:pointer;}
#select_1{display:block;}
</style>
<script src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("td").mouseover(function(){
$(this).css("background","red")//給當前td加上背景
.siblings().removeAttr("style");//移除其它兄弟元素
var ids= $(this).attr("id");//擷取當前的ID
var id=ids.substring(ids.lastIndexOf('_'));//截取字串
var selID="#select"+id; //拼裝字串
$(selID).show() //顯示DIV
.siblings().hide();//隱藏其它兄弟DIV元素
});
});
</script>
</head>
<body>
<div>
<table width="200" border="1">
<tr>
<td id="td_1">選項卡1</td>
<td id="td_2">選項卡2</td>
<td id="td_3">選項卡3</td>
</tr>
</table>
<div>
<div id="select_1" class="block">選項卡1</div>
<div id="select_2" class="block">選項卡2</div>
<div id="select_3" class="block">選項卡3</div>
</div>
</div>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
