创建选项卡导航界面

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="tab.css" media="screen" />

</head>
<body>
<div class="tabContainer">
     <ul class="tabHeader">
          <li>Tab1</li>
          <li>Tab2</li>
          <li>Tab3</li>
     </ul>
     <div class="contents">
          <div class="tabContent">
               <h3>Tab 1</h3>
               Content for tab1
          </div>

          <div class="tabContent">
               <h3>Tab 2</h3>
               Content for tab2
          </div>


          <div class="tabContent">
               <h3>Tab 3</h3>
               Content for tab3
          </div>
     </div>
</div>

<script type="text/javascript" src="../jquery-1.4.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
     $('.tabContent:gt(0)').hide();
     $('.tabHeader > li').click(
          showHideTabs
);

     function showHideTabs(){
          var allLi=$('.tabHeader > li').removeClass('active');
          $(this).addClass('active');
          var index=allLi.index(this);
          $('.tabContent:visible').hide();
          $('.tabContent:eq('+index+')').show();
     }

});

</script>
</body>
</html>

tab.css

@CHARSET "UTF-8";
body
     {
     font-family:"Trebuchet MS",verdana;
          margin:50 auto;
          width:800px;
}
h3{
     margin:0;
     padding:0;
}

ul{
     float:left;
     list-style:none;
     margin:0pt;
     padding:0pt;
     width:600px;
}

li{
     border-left:1px solid #000;
     border-right:1px solid #000;
     cursor:pointer;
     float:left;
     padding:5px;
     text-align:center;
     width:100px;
}
.tabContainer{
     border:1px solid #000;
     float:left;
     width:600px;
}
.tabContent{
     border-top:1px solid #000;
     float:left;
     height:100px;
     padding:5px;
     text-align:justify;
     width:590px;
}
.active{
     background-color:#6AA63B;
     color:white;
}

posted @ 2014-03-31 17:47 wint Views(202) Comments(0) 收藏举报

刷新页面返回顶部

wint

创建选项卡导航界面

公告