当前位置： 代码迷 >> JavaScript >> 一个容易的javascript tab选项卡
  详细解决方案

一个容易的javascript tab选项卡

热度：85   发布时间：2012-10-25 10:58:57.0
一个简单的javascript tab选项卡
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="UTF-8">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>一个简单的javascript tab选项卡</title>
        <meta name="keyword" content="javascript tab选项卡" />
	<meta name="description" content="一个简单的javascript tab选项卡" />
        <script type="text/javascript">
            /**
             * @author
			 * @copyright private
			 * @create  23/11/2010
             */
            var tab = function(data){
                this.data = data;
            }
            tab.prototype = {
                init:function(){
                    var $t = this;
                    var $d = this.data;
                    $d.t1 = $d.t1?$d.t1:'span';
                    $d.t2 = $d.t2?$d.t2:'ul';
                    $d.cur = $d.cur?$d.cur:'current';
                    $d.s = $d.s?$d.s:0;
                    $d.ts1 = document.getElementById($d.id).getElementsByTagName($d.t1);
                    $d.ts2 = document.getElementById($d.id).getElementsByTagName($d.t2);
                    $d.ts1[$d.s].className = $d.cur;
                    $d.ts2[$d.s].style.display = 'block';
                    for(var i = 0; i < $d.ts1.length; i++){
                        $d.ts1[i].onmouseover = (function(i,$d){
                            return function(){
                                $d.ts2[$d.s].style.display = 'none';//隐藏前面显示的内容
                                $d.ts1[$d.s].className = '';//设置之前选中类为null
                                $d.s = i;//将当前选中索引值负值给$d.s
                                this.className = $d.cur;//设置当前选中样式
                                $d.ts2[i].style.display = 'block';//显示当前选中项对应的内容
                            }
                        })(i,$d)
                    }
                }
            }
        </script>
        <style type="text/css">
            *{margin:0;padding:0;list-style:none}
            body{padding:10px;font-size:12px;}
            .tab{width:520px;background:#fff;margin-bottom:10px;}
            .tab span{float:left;height:20px;line-height:20px;width:78px;border:1px solid #aeaeae;border-bottom:none;margin:0 5px 0 0;text-align:center;cursor:pointer;}
            .tab span.current{position:relative;margin-bottom:-1px;background:#fff;height:21px;}
            .tab ul{clear:both;border:1px solid #aeaeae;padding:5px;display:none;}
        </style>
    </script></head>
    <body>
        <div id="tab" class="tab">
            <span>选项A</span>
            <span>选项B</span>
            <span>选项C</span>
            <span>选项D</span>
            <span>选项E</span>
            <span>选项F</span>
            <ul><li>切换吧切换吧a</li></ul>
            <ul><li>切换吧切换吧b</li></ul>
            <ul><li>切换吧切换吧C</li></ul>
            <ul><li>切换吧切换吧D</li></ul>
            <ul><li>切换吧切换吧E</li></ul>
            <ul><li>切换吧切换吧F</li></ul>
        </div>
        <div id="tab1" class="tab">
            <span>选项A</span>
            <span>选项B</span>
            <span>选项C</span>
            <span>选项D</span>
            <span>选项E</span>
            <span>选项F</span>
            <ul><li>切换吧切换吧a</li></ul>
            <ul><li>切换吧切换吧b</li></ul>
            <ul><li>切换吧切换吧C</li></ul>
            <ul><li>切换吧切换吧D</li></ul>
            <ul><li>切换吧切换吧E</li></ul>
            <ul><li>切换吧切换吧F</li></ul>
        </div>
        <script type="text/javascript">
            var tab1 = new tab({id:'tab',s:5});
            tab1.init()
            var tab = new tab({id:'tab1',s:5});
            tab.init()
        </script>
    </body>
</html>
  相关解决方案

代码迷 - 您身边的软件异常，代码异常，编程异常助手（发现，解决，分享）
Copyright © 2009-2013 DAIMAMI.COM. All rights reserved.