jQuery课程表选项卡滑动切换

1、新建html文档。

2、书写hmtl代码。

<div style="width:1000px;margin: 0 auto;">

 <h1 class="H unone clear"> <span class="left">信息 </span> </h1>

 <div class="jyTable">

  <div class="clearfix">

   <ul class=" left">

    <li class='cur'>星期一</li>

    <li>星期二</li>

    <li>星期三</li>

    <li>星期四</li>

    <li>星期五</li>

    <li>星期六</li>

    <li>星期日</li>

   </ul>

  </div>

  <div class='zong'>

   <div class="list list1">

    <div class="tabCon">

     <ul>

      <li class="tabth clearfix"> <span style="width: 13%">时间/上午</span> <span style="width: 12%">校区</span> <span style="width: 10%">室</span> <span style="width: 16%">级</span> <span style="width: 16%">内容</span> <span style="width: 16%">主任</span> <span style="width: 15%">操作</span> </li>

      </li>

     </ul>

    </div>

   </div>

  </div>

 </div>

</div>

3、初始化css代码。

<style>

ul,ol,li{list-style-type:none;}

a img{border:0;}

a{text-decoration:none; color:  #595757;}

a:hover{text-decoration:underline; color:  #595757;}

.left{float:left;}

.right{float:right;}

.textCenter{text-align:center;}

.textRight{text-align:right;}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}

body{font-size: 12px;color: #595757;font-family: "微软雅黑";background-color: #ffffff;}

body a{color: #595757}</style>

4、书写css代码。

.tH1{height:40px;line-height:40px;font-size:20px;font-weight:bold;border-bottom:2px solid lightskyblue;margin-bottom:5px;}

.t{padding-left:1px;}

.t li{width:90px;text-align:center;background-color:lightskyblue;font-size:17px;float:left;cursor:pointer;padding:6px 0;}

.t li.cur{background:lightskyblue;color:#ffffff;}

.texp li{float:left;margin-right:10px;}

.zong{clear:both;width:1000px;height:260px;overflow:hidden;}

.list{width:6994px;}

.list .tabCon{float:left;width:997px;height:250px;border:1px solid #F2F2F2;border-top:0px ;}

.tabth{width:997px;height:37px;line-height:37px;color:#ffffff;background-color:lightskyblue;}

.tabth span{display:inline-block;text-align:center;float:left;}

#s1,#s2,#s3,#s4,#s5,#s6,#s7{height:210px;overflow:hidden;}

.tabUl{height:200px;overflow:hidden;}

.tabtr{width:1000px;height:40px;*height:38px;line-height:40px;*line-height:38px;}

.tabtr span,.tabtr a{display:inline-block;text-align:center;cursor:pointer;float:left;text-decoration:none;}

.hot{background:lightskyblue;color:#ffffff;cursor:pointer;}

5、书写并添加js代码。

<script src="js/jquery-1.7.2.min.js"></script>

<script src="js/tab.js"></script>

6、代码整体结构。

7、查看效果。