您的位置：首页 > Web前端 > HTML

一步一步学Silverlight 2系列（19）：如何在Silverlight中与HTML DOM交互（上）

2009-01-12 14:35 555 查看

直接上代码！

<html>
<head>
<title>tab控件</title>

<style type="text/css">
div.tab_control{
position:relative;
margin:0 auto;
width:300px;
}

/** 定义tab选项卡的样式 */
div.tab_control ul{
list-style:none;
margin:0px 1px;
padding:0px 0px 20px 0px;
line-height:0px;
border-bottom:1px solid #8db2e3;
}

div.tab_control ul li{
float:left;
overflow:hidden;
display:inline-block;
color:black;
background:#e4edf3;
cursor:pointer;
width:90px;
text-align:center;
line-height:19px;
margin:0px 1px 0px 1px;
border:1px solid #8db2e3;
padding:0px;
font-family:宋体;
font-size:12px;
}

div.tab_control ul li.selected {
background:white;
border-bottom:1px solid white;
}

div.tab_control div.tab_content{
display:block ;
overflow:hidden;
border:1px solid #8db2e3;
border-top:0px;
padding:0px;
margin:0px 1px 1px 1px;
clear:both;
background:white;
}

</style>

<script language="javascript">
//显示标签页
function showTab(liobj, liname) {
if (liname.indexOf(' selected') !== -1) return; // 没有改变选项

var tag = liobj.parentNode.childNodes;
for (var i = 0; i < tag.length; i++) {
var item = tag[i];
if (item.nodeType === 1) {
if (item.className.indexOf(' selected') !== -1) {
item.className = item.className.replace(' selected', '');
document.getElementById(item.className).style.display = 'none';
}
}
}

document.getElementById(liname).style.display = 'block';
liobj.className += ' selected';
}

</script>
</head>
<body>
<div class="tab_control">
<ul>
<!-- class 关联对应的编号 -->
<li class="li_1 selected" onmousedown="javascript:showTab(this, this.className);">个人用户登录</li>
<li class="li_2" onmousedown="javascript:showTab(this, this.className);" >企业用户登录</li>
<li class="li_3" onmousedown="javascript:showTab(this, this.className);" >其他用户登录</li>
</ul>
<div class="tab_content">
<div id="li_1">123</div>
<div id="li_2" style="display:none;">456</div>
<div id="li_3" style="display:none;">789</div>
</div>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航