Tab的语义化

这个Tab的javascript代码没有什么特别之处，html来了次 语义化尝试，本人初学javascript与jquery，拿这个语义化的Tab练手，如有不妥之处还请指正。

下面是效果

tab1

  • 新闻1
  • 新闻2

tab2

  • 新闻3
  • 新闻2

tab1

  • 新闻11
  • 新闻11
  • 新闻11
  • 新闻11
  • 新闻11
  • 新闻11

tab2

  • 新闻22
  • 新闻2

tab3

  • 新闻333
  • 新闻2

tab4

  • 新闻444
  • 新闻2

下面是代码

 

代码 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type="text/javascript">
$(function(){
    $(".tab h2").each(function(i){
        $(this).mouseover(function(){
            $(this).addClass("hover").siblings().removeClass("hover");
            $($(".tab div")[i]).addClass("block").siblings().removeClass("block");
        });
    });
})
</script>
<style>
div,h2,ul{margin:0; padding:0;}
ul{list-style:none;}
.tab{border:1px solid #ccc; position:relative;}
.tab h2{width:120px; border-bottom:1px solid #ccc; position:absolute; text-align:center; line-height:24px; height:24px; font-size:14px; cursor:pointer;}
.tab1{left:0; top:0;}
.tab2{left:120px; top:0;}
.tab3{left:240px; top:0;}
.tab4{left:360px; top:0;}
.hover{background:#999;}
.con{margin-top:24px; padding:10px; display:none;}
.block{display:block;}
</style>
</head>
<body>
<div style="width:240px;">
<div class="tab">
    <h2 class="tab1 hover">tab1</h2>
    <div class="con block">
        <ul>
            <li>新闻1</li>
            <li>新闻2</li>
        </ul>
    </div>
    <h2 class="tab2">tab2</h2>
    <div class="con">
        <ul>
            <li>新闻3</li>
            <li>新闻2</li>
        </ul>
    </div>
</div>
</div>
<div style="width:480px; margin-top:10px;">
<div class="tab">
    <h2 class="tab1 hover">tab1</h2>
    <div class="con block">
        <ul>
            &lt;li>新闻11</li>
            <li>新闻11</li>
            <li>新闻11</li>
            <li>新闻11</li>
            <li>新闻11</li>
            <li>新闻11</li>
        </ul>
    </div>
    <h2 class="tab2">tab2</h2>
    <div class="con">
        <ul>
            <li>新闻22</li>
            <li>新闻2</li>
        </ul>
    </div>
    <h2 class="tab3">tab3</h2>
    <div class="con">
        <ul>
            <li>新闻333</li>
            <li>新闻2</li>
        </ul>
    </div>
    <h2 class="tab4">tab4</h2>
    <div class="con">
        <ul>
            <li>新闻444</li>
            <li>新闻2</li>
        </ul>
    </div>
</div>
</div>
</body>
</html>
posted @ 2010-06-18 13:22  我是警察谁知道  阅读(252)  评论(0)    收藏  举报