程序园

弹奏键盘人生,拂去青春的尘土,留下的只有岁月的痕迹
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

tab

Posted on 2010-05-21 09:54  程旭圆  阅读(187)  评论(0编辑  收藏  举报

<style type="text/css">

.b_on{}
.b_off{}
</style>

<script type="text/javascript">
        function tabit(tabName, btnId, tabNumber, btnClass) {
            for (i = 0; i < tabNumber; i++) {
                document.getElementById(tabName + '_div' + i).style.display = 'none';
                document.getElementById(tabName + '_btn' + i).className = btnClass + 'off';
            }
            document.getElementById(tabName + '_div' + btnId).style.display = 'block';
            document.getElementById(tabName + '_btn' + btnId).className = btnClass + 'on';
        }
</script>

<ul>
     <li class="b_on" id="tab_btn0" onclick="tabit('tab',0,3,'b_')">标签1 </li>
     <li class="b_off" id="tab_btn1" onclick="tabit('tab',1,3,'b_')">标签2 </li>
     <li class="b_off" id="tab_btn2" onclick="tabit('tab',2,3,'b_')">标签3 </li>
</ul>

<div id="tab_div0"></div>

<div id="tab_div1" style="display: none;"></div>

<div id="tab_div2" style="display: none;"></div>