标签页:39健康网提出来的选项卡

作者:admin 日期:2008-11-02

字体大小: 小中大

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Tab</title>
<style type="text/css">
body{background:#FFF; font-size:12px}
a{text-decoration:none}
div {line-height: 18px;}
h1 {margin: 0px; padding: 0px;}
h1, p {margin: 0px; padding: 0px;line-height: 18px;}
ul{padding:0;margin:0; list-style:none}
.imgArt, .imgArt-b {float: left; text-align: center;}
.imgArt {width: 81px; padding: 0 10px;}
.imgArt-b {width: 106px; padding: 0 3px;}
.narrow {padding: 0 6px!important;}
.img {background: #FFF; border: 1px solid #ccc;padding: 2px;}
.img-b {background: #FFF; border: 1px solid #FFF;padding: 2px 5px;}
.imgArt p, .imgArt-b p {margin: 7px 0 0 0;line-height: 15px;}

.brief {float: right;padding-right: 10px}
.brief h1 {font: bold 12px verdana;margin: 7px 0}
.taBox {display: none}
/*    -----------------tabs */
.tabs {background: url("http://www.is21.cn/attachments/month_0811/c2008112233648.gif") repeat-x bottom;overflow: auto; height: 100%}
.tabs li {float: left; text-align: center;line-height: 20px}
.tabs li a {float: left; color: #FFF;background: url("http://www.is21.cn/attachments/month_0811/22008112233757.gif") left -25px;width: 104px;padding-top: 5px}
.tabs li a:hover, .tabs li a.current {color: #60208E;font-weight: bold; background: url("http://www.is21.cn/attachments/month_0811/22008112233757.gif")}
.tab1 {margin-right: 2px}

.woman, .man {margin-top: 5px}
.womanTabs {background: url("http://www.is21.cn/attachments/month_0811/l2008112233947.gif") repeat-x bottom;overflow: auto;height: 100%}
.womanTabs li, .manTabs li {line-height: 21px;margin: 0 1px;float: left; text-align: center}
.womanTabs li a, .manTabs li a {color: #F36;background: url("http://www.is21.cn/attachments/month_0811/n2008112234059.gif") left -24px;width: 57px;float: left; padding-top: 3px}
.womanTabs li a:hover, .womanTabs li a.current {color: #F36;font-weight: bold;background: url("http://www.is21.cn/attachments/month_0811/n2008112234059.gif")}
.womanTabs .title, .manTabs .title {background: url("http://www.is21.cn/attachments/month_0811/c2008112234210.gif") no-repeat center;width: 66px;height: 21px}
.woman .body, .man .body {border: 1px solid #FCC; border-top: 0px;overflow: auto;height: 100%;padding: 8px 0; -padding-bottom: 0px}
.manTabs {background: url("http://www.is21.cn/attachments/month_0811/22008112234436.gif") repeat-x bottom;overflow: auto;height: 100%;}
.manTabs li a {color: #66C;background: url("http://images.39.net/sex/images/tab_5.gif") left -24px}
.manTabs li a:hover, .manTabs li a.current {color: #66C;font-weight: bold;background: url("http://images.39.net/sex/images/tab_5.gif")}
.manTabs .title {background-image: url("http://www.is21.cn/attachments/month_0811/52008112234558.gif")}
.man .body {border: 1px solid #D2D9FD; border-top: 0px}
ul.rank {background: url("http://www.is21.cn/attachments/month_0811/n2008112234650.gif") no-repeat left top; padding-left: 20px;line-height: 22px;overflow: auto; height: 100%}
.rankBox {background: url("http://www.is21.cn/attachments/month_0811/c2008112234744.gif") no-repeat bottom;padding-bottom: 7px;}
.rankBox .body {border-left: 1px solid #EDDFF7; border-right: 1px solid #EDDFF7;padding: 5px 0 0 7px;}

</style>
</head>
<body>
<script type="text/javascript">
//DD Tab Menu- Last updated April 27th, 07: http://www.dynamicdrive.com
//Only 1 configuration variable below
var ddtabmenu={
    disabletablinks: false, ////Disable hyperlinks in 1st level tabs with sub contents (true or false)?
    currentpageurl: window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, ""), //get current page url (minus hostname, ie: http://www.dynamicdrive.com/)
definemenu:function(tabid, dselected){
    this[tabid+"-menuitems"]=null
    this.addEvent(window, function(){ddtabmenu.init(tabid, dselected)}, "load")
},
showsubmenu:function(tabid, targetitem){
    var menuitems=this[tabid+"-menuitems"]
for (i=0; i<menuitems.length; i++){
        menuitems[i].className=""
        if (typeof menuitems[i].hasSubContent!="undefined")
            document.getElementById(menuitems[i].getAttribute("rel")).style.display="none"
    }
    targetitem.className="current"
    if (typeof targetitem.hasSubContent!="undefined")
        document.getElementById(targetitem.getAttribute("rel")).style.display="block"
},
isSelected:function(menuurl){
    var menuurl=menuurl.replace("http://"+menuurl.hostname, "").replace(/^\//, "")
    return (ddtabmenu.currentpageurl==menuurl)
},
addEvent:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
    var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
    if (target.addEventListener)
        target.addEventListener(tasktype, functionref, false)
    else if (target.attachEvent)
        target.attachEvent(tasktype, functionref)
},
init:function(tabid, dselected){
    var menuitems=document.getElementById(tabid).getElementsByTagName("a")
    this[tabid+"-menuitems"]=menuitems
    for (var x=0; x<menuitems.length; x++){
        if (menuitems[x].getAttribute("rel")){
            this[tabid+"-menuitems"][x].hasSubContent=true
            if (ddtabmenu.disabletablinks)
                menuitems[x].onclick=function(){return false}
        }
        else //for items without a submenu, add onMouseout effect
            menuitems[x].onmouseout=function(){this.className=""}
        menuitems[x].onmouseover=function(){ddtabmenu.showsubmenu(tabid, this)}
        if (dselected=="auto" && typeof setalready=="undefined" && this.isSelected(menuitems[x].href)){
            ddtabmenu.showsubmenu(tabid, menuitems[x])
            var setalready=true
        }
        else if (parseInt(dselected)==x)
            ddtabmenu.showsubmenu(tabid, menuitems[x])
    }
}
}
</script>
<script type="text/javascript">
ddtabmenu.definemenu("tabs3", 0);
ddtabmenu.definemenu("tabs4", 0);
ddtabmenu.definemenu("tabs5", 0);
</script>
<div style="width:210px">
        <div class="rankBox">
            <div id="tabs3" class="tabs">
                <li class="tab1"><a rel="3-a">生理热门排行</a></li>
                <li><a rel="3-b">心理热门排行</a></li>
            </div>
            <div class="body">
                <div id="3-a" class="taBox">
                    <ul class="rank"><li><a href="http://sex.39.net/xsl/woman/yb/0711/6/156921.html">日本MM努力锻炼她们的私处</a></li><li><a href="http://sex.39.net/xsl/woman/rf/0711/8/159270.html">波霸惹祸胸大损健康(图)</a></li><li><a href="http://sex.39.net/xsl/man/yj/0711/20/172052.html">性器官：韩国最短法国最长</a></li><li><a href="http://sex.39.net/xsl/man/jy/0711/15/168609.html">精液有助于女性身体健康？</a></li><li><a href="http://sex.39.net/xsl/man/nxxgc/0711/13/165797.html">男人也可以有多次性高潮？</a></li><li><a href="http://sex.39.net/xsl/woman/nxxgc/0711/12/164392.html">教女人走进性高潮的决窍</a></li><li><a href="http://sex.39.net/xsl/man/nxxgc/0711/15/168491.html">男性高潮乘风破浪</a></li></ul>
                </div>

                <div id="3-b" class="taBox">
                    <ul class="rank"><li><a href="http://sex.39.net/xxl/btxxl/0711/5/155874.html">乱伦性虐杂交，性幻想正常吗？</a></li><li><a href="http://sex.39.net/xxl/wxxl/0711/23/174443.html">自发性高潮独乐新玩法</a></li><li><a href="http://sex.39.net/xxl/wxxl/0711/6/156379.html">女人轻易放弃初夜九大歪理</a></li><li><a href="http://sex.39.net/xxl/mxxl/0711/22/173954.html">三个男人的真“性”对话</a></li><li><a href="http://sex.39.net/xxl/wxxl/0711/25/174253.html">充气娃娃让你满肚子气?</a></li><li><a href="http://sex.39.net/xxl/wxxl/0711/19/171223.html">女人须伪装高潮的6个理由</a></li><li><a href="http://sex.39.net/xxl/xxlbl/0711/21/173047.html">求救！如何面对失控的性幻想</a></li></ul>
                </div>
            </div>
        </div>
</div>
<div style="width:310px">
    <div class="woman">
        <div id="tabs4" class="womanTabs">
            <li class="title"></li>
            <li><a href="/xsl/woman/rf/" rel="4-a">乳房</a></li>
            <li><a href="/xsl/woman/yb/" rel="4-b">阴部</a></li>
            <li><a href="/xsl/woman/yj/" rel="4-c">月经</a></li>
            <li><a href="/xsl/woman/nxxgc/" rel="4-d">性高潮</a></li>
        </div>

        <div class="body">
            <div id="4-a" class="taBox">
                <div class="imgArt"><div class="img"><img src="http://www.is21.cn/attachments/month_0811/42008112234851.jpg" width="75" height="60" /></div></div>
                <div class="brief" style="width:192px; ">
                    <h1><a href="#">波霸惹祸胸大损健康(图)</a></h1>
                    <p>　　<a href="#">虽然美国媒体的焦点仍集中于隆胸和乳房移植上，但美国各地的……</a></p>
                </div>
            </div>

            <div id="4-b" class="taBox">
                <div class="imgArt"><div class="img"><img src="http://www.is21.cn/attachments/month_0811/r200811223519.jpg" width="75" height="60" /></div></div>
                <div class="brief" style=" width: 192px; ">
                    <h1><a href="#">日本MM努力锻炼她们的私处</a></h1>
                    <p>　　<a href="#">日本的女孩子在性方面的开放程度领亚洲之先，道德尺度的松弛……</a></p>
                </div>
            </div>

            <div id="4-c" class="taBox">
                <div class="imgArt"><div class="img"><img src="http://www.is21.cn/attachments/month_0811/m2008112235022.jpg" width="75" height="60" /></div></div>
                <div class="brief" style=" width: 192px; ">
                    <h1><a href="#">追求“骨感美”导致闭经</a></h1>
                    <p>　　<a href="#">近来有一个不好的苗头，有些少女在有了初潮后，长到了十七八……</a></p>
                </div>
            </div>

            <div id="4-d" class="taBox">
                <div class="imgArt">
                <div class="img"><img src="http://image.39.net/0711/26/58994_75x60_1192.jpg" width="75" height="60" /></div></div>
                <div class="brief" style=" width: 192px; ">
                    <h1><a href="#">一触即发击中女人消魂穴</a></h1>
                    <p>　　<a href="#">由于性科学的发达，人们越来越注重性爱这项休闲活动，我们对……</a></p>
                </div>
            </div>
        </div>
    </div>

    <div class="man">
        <div id="tabs5" class="manTabs">
            <li class="title"></li>
            <li><a href="/xsl/man/yj/" rel="5-a">阴茎</a></li>
            <li><a href="/xsl/man/gw/" rel="5-b">睾丸</a></li>
            <li><a href="/xsl/man/jy/" rel="5-c">精液</a></li>
            <li><a href="/xsl/man/nxxgc/" rel="5-d">性高潮</a></li>
        </div>

        <div class="body">
            <div id="5-a" class="taBox">
                <div class="imgArt"><div class="img"><img src="http://www.is21.cn/attachments/month_0811/p200811223539.jpg" width="75" height="60" /></div></div>
                <div class="brief" style=" width: 192px; ">
                    <h1><a href="#">乐极生悲：亲热过猛扭断生殖器</a></h1>
                    <p>　　<a href="#">但像这样因用力过猛导致下体海绵体扭断的，十分少见。”医生……</a></p>
                </div>
            </div>

            <div id="5-b" class="taBox">
                <div class="imgArt"><div class="img"><img src="http://www.is21.cn/attachments/month_0811/02008112235319.jpg" width="75" height="60" /></div></div>
                <div class="brief" style=" width: 192px; ">
                    <h1><a href="#">警惕睾丸炎致男性不育</a></h1>
                    <p>　　<a href="#">睾丸炎是男性生殖系统的常见炎症，可由多种致病因素引起的睾……</a></p>
                </div>
            </div>

            <div id="5-c" class="taBox">
                <div class="imgArt">
                <div class="img"><img src="http://www.is21.cn/attachments/month_0811/s2008112235334.jpg" width="75" height="60" /></div></div>
                <div class="brief" style=" width: 192px; ">
                    <h1><a href="#">精液的"疑虑"的最新报告</a></h1>
                    <p>　　<a href="#">一个新生命的诞生就在精子与卵子相结合的一瞬间，为了相聚这……</a></p>
                </div>
            </div>

            <div id="5-d" class="taBox">
                <div class="imgArt"><div class="img"><img src="http://www.is21.cn/attachments/month_0811/u2008112235451.jpg" width="75" height="60" /></div></div>
                <div class="brief" style=" width: 192px; ">
                    <h1><a href="#">男人也可以有多次性高潮？</a></h1>
                    <p>　　<a href="#">理论上认为，女性能在一次高潮后，又立刻接续另一次的高潮。……</a></p>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>