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

JS 简单实现Ext.TabPanel效果（转载）

2014-02-28 11:03 671 查看

<html>
<head>
    <title>一个TAB页的简单JS实现</title>
    <style type="text/css">
     #div0{
         width:300px;
         margin:0 auto;
     }
     #div1{
         border:1px solid blue;
         border-bottom:0px solid blue;
         float:left;
     }
     #div2{
         border-right:1px solid blue;
         border-top:1px solid blue;
         float:left;
     }
     #div3{
         border:1px solid blue;
         clear:left;
     }
     #div4{
         border:1px solid blue;
         clear:left;
     }
</style>
<script language="javascript">
window.onload=function(){
document.getElementById("div1").style.backgroundColor="yellow";
document.getElementById("div4").style.display="none";
}
function foo(){
document.getElementById("div1").style.backgroundColor="yellow";
document.getElementById("div2").style.backgroundColor="";
document.getElementById("div3").style.display="none";
document.getElementById("div4").style.display="block";
}
function bar(){
document.getElementById("div1").style.backgroundColor="";
document.getElementById("div2").style.backgroundColor="yellow";
document.getElementById("div3").style.display="block";
document.getElementById("div4").style.display="none";
}
</script>
</head>
<body>
    <div id="div0">
        <div id="div1" onmouseover="foo()">标题一</div>
        <div id="div2" onmouseover="bar()">标题二</div>
        <div id="div3">内容一</div>
        <div id="div4">内容二</div>
    </div>
</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航