div 实现 tab 页

最新推荐文章于 2025-08-13 15:57:17 发布

原创最新推荐文章于 2025-08-13 15:57:17 发布 · 650 阅读

CC 4.0 BY-SA版权

文章标签：

#div #class #chrome #xhtml #javascript #float

<!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">
<head>
    <title></title>
<script type="text/javascript" 

src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"

></script>
    <style type="text/css">
    .minTab {
	    overflow:hidden;
	    height:50px;
    }
    .minTab ul {
	    _overflow:hidden;
	    width:100%;
	    padding:0 6px;
	    height:27px;
	    line-height:27px;
	    position:relative;
	    border:solid #cfcfcf 1px;
	    border-left:none;
	    border-right:none;
	    white-space:nowrap;
	    background-color: #fbfbfb;
        list-style-type:none;
	    background-image: -moz-linear-gradient(top, #fbfbfb, 

#eff0f1); /* FF3.6 */
	    background-image: -ms-linear-gradient(top, #fbfbfb, 

#eff0f1); /* IE10 */
	    background-image: -o-linear-gradient(top, #fbfbfb, 

#eff0f1); /* Opera 11.10+ */
	    background-image: -webkit-gradient(linear, left top, left 

bottom, from(#fbfbfb), to(#eff0f1)); /* Saf4+, Chrome */
	    background-image: -webkit-linear-gradient(top, #fbfbfb, 

#eff0f1); /* Chrome 10+, Saf5.1+ */
	    background-image: linear-gradient(top, #fbfbfb, #eff0f1);
     filter: progid:DXImageTransform.Microsoft.gradient

(startColorStr='#fbfbfb', EndColorStr='#eff0f1'); /* IE6–IE9 */
    }
    .minTab ul li {
	    float:left;
	    padding:0 16px;
	    position:relative;
	    height:28px;
	    line-height:27px;
	    cursor:pointer;
    }

    .minTab ul li.active {
	    border-right:solid #cfcfcf 1px;
	    border-left:solid #cfcfcf 1px;
	    background-color:#fff;
	    padding:0 12px;
	    height:28px;
	    font-weight:bold;
	    _margin-bottom:-1px;
     }
     /*第二种*/
      
    .Tab-top ul, .Tab-top ul li,Tab-top ul li.active, .Tab-top ul li 

span { background-image:url('http://hi.youkuaiyun.com/attachment/201107/5/0_1309842250iy2Q.gif'); }
    .Tab-top{ height:30px; font-size:14px; line-height:1; }
    .Tab-top ul { padding:0 6px; height:30px; background-

position:bottom;list-style-type:none; }
    .Tab-top ul li{ float:left; cursor:pointer; padding-left:11px; 

margin:0 2px 0 1px; height:30px; background-position:0 -60px; }
    .Tab-top ul li.active{ background-position:0 0; }
    .Tab-top ul li span { line-height:30px; height:30px; 

display:inline-block; padding:0 11px 0 5px; white-space:nowrap; 

background-position: right -90px; }
    .Tab-top ul li.active span{ padding:0 7px 0 3px; background-

position:right -30px; font-weight:bold; }
    </style>
    <script type="text/javascript" language="javascript">
        $(".minTab,.Tab-top").live("click", function(event) {
            var $target = $(event.target);
            var $this = $(this);
            if ($target.is("li")) {
                $this.find("li").removeClass("active");
                $target.addClass("active");
            } else if ($target.is("li span")) {
                $this.find("li").removeClass("active");
                $target.parent("li").addClass("active");
            }
        });
    </script>
    
</head>
<body>
    <form id="form1" >
    <div>
     <div class="minTab" style="">
                    <ul>
                        <li id="lidivTJ" class="active" 

style="cursor: hand" onclick="return false;">
                            <span>你好</span></li>
                        <li id="lidivQuanb" style="cursor: hand" 

onclick="return false;"><span>
                            你好</span></li>
                        <li id="lidivRij" style="cursor: hand" 

onclick="return false;"><span>
                            你好</span></li>
                        <li id="lidivLiuc" style="cursor: hand" 

onclick="return false;"><span>
                            你好</span></li>
                        <li id="lidivRenw" style="cursor: hand" 

onclick="return false;"><span>
                            你好</span></li>
                        <li id="lidivJih" style="cursor: hand" 

onclick="return false;"><span>
                            你好</span></li>
                        <li id="lidivKaoq" style="cursor: hand;" 

onclick="return false;"><span>
                            你好</span></li>
                    </ul>
                </div>
                <br />
                <div class="Tab-top" style="">
                    <ul>
                        <li id="li1" class="active" style="cursor: 

hand" onclick="return false;">
                            <span>你好</span></li>
                        <li id="li2" style="cursor: hand" 

onclick="return false;"><span>
                            你好</span></li>
                        <li id="li3" style="cursor: hand" 

onclick="return false;"><span>
                            你好</span></li>
                        <li id="li4" style="cursor: hand" 

onclick="return false;"><span>
                            你好</span></li>
                        <li id="li5" style="cursor: hand" 

onclick="return false;"><span>
                            你好</span></li>
                        <li id="li6" style="cursor: hand" 

onclick="return false;"><span>
                            你好</span></li>
                        <li id="li7" style="cursor: hand;" 

onclick="return false;"><span>
                            你好</span></li>
                    </ul>
                </div>
    </div>
    </form>
</body>
</html>

样式2 图片：http://hi.youkuaiyun.com/attachment/201107/5/0_1309842250iy2Q.gif