选项卡

选项卡的练习

by xiaobai

HTML

<link rel="stylesheet" href="http://www.xiaobai8.com/js/base.css">
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>选项卡</title>
</head>
<body>
<div id="mainContent">
  <div class="subNav">
    <ul class="clearfix">
      <li>Women</li>
      <li>Men</li>
      <li>Others</li>
    </ul>
  </div>
  <div class="clearleft"></div>
  <div class="mainProduct">
        Women
  </div>
  <div class="mainProduct">
        Men
  </div>
  <div class="mainProduct">
        Others
  </div>
</div>

</body>
</html>

CSS

/*---mainContent---*/  
#mainContent{ width:980px; margin:0 auto; overflow:hidden;}
.subNav{ width:960px;border-bottom:1px solid #a60100; margin:0 auto; margin-top:10px;}
.subNav ul{ list-style:none; width:540px; margin-left:6px; }
.subNav li{ float:left; width:114px; height:30px; background:#c6c6c6; line-height:30px; text-align:center; margin-left:4px; color:#000; font-size:16px;_display:inline;cursor:pointer;}
.subNav li.on{ background:#a60100; color:#FFF;}
/*---mainProduct---*/
.mainProduct{width:960px;margin:0 auto; padding-top:10px; height:auto; overflow:hidden;}

JavaScript

function tabNab(config){
    this.mainNav=config.mainNav;//选项卡的div
    this.mainContent=config.mainContent;//选项卡内容
    this.className=config.className||"on";//选项卡的样式，默认是on
};
tabNab.prototype={
    showTab:function(i){
        var mainNav=this.mainNav,
            mainContent=this.mainContent,
            className=this.className;
        $(mainContent).hide().eq(i).show();
        $(mainNav).eq(i).addClass(className);
        $(mainNav).click(function(){
            var _this=this,
                _index=$(_this).index();
                $(mainContent).hide().eq(_index).show();
                $(_this).addClass(className).siblings().removeClass(className);
        });
    }
};
var NewTab=new tabNab({mainNav:".subNav li",mainContent:".mainProduct"});
    NewTab.showTab(1);