一个简单的选项卡

　　编程语言不经常写的话，很容易忘记。

　　复习下。。。

　　今天，做一个简单的选项卡，数据请求用ajax。

　　首相：看下html布局，简单点布局。

　　1.html

 1 <body style="height:5000px;">
 2     <div class="btn">
 3         <ul>
 4             <li class="active">one</li>
 5             <li>two</li>
 6             <li>there</li>
 7         </ul>
 8     </div>
 9     <div>
10         <div class="box" style="display:block;">loading1...</div>
11         <div class="box">loading2...</div>
12         <div class="box">loading3...</div>
13     </div>
14 </body>

　　2.css

1 <style>
2         *{margin:0px;padding:0px;}
3         .btn{width:400px;height:50px;}
4         .btn ul li{list-style-type:none;float:left;padding-right:10px;border:1px solid #ccc;width:122px;height:50px;text-align:center;line-height:50px;cursor:pointer;}
5         .box{width:400px;height:300px;border:1px solid #ccc;display:none;}
6         .active{background:green;}
7 </style>

　　3.js

 1 <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
 2     <script>
 3         $(function(){
 4 
 5             $(".btn").find("li").on("click",function(){
 6                 if($(this).hasClass('active')){
 7                     return false;
 8                 }
 9                 var $index = $(this).index();
10                 $(this).attr("class","active").siblings().attr("class","");
11                 $(".box").eq($index).css("display","block").siblings().css("display","none");
12 
13                     
14                     loadData($index,function(data){
15                         $(".box").eq($index).html(data);
16                         })
17                     })
18 
19             })                            
20             loadData(0,function(data){
21                 $(".box").eq(0).html(data);
22             });
23 
24             function loadData(num,fn){
25                 $.ajax({
26                     url:'more.php?num='+num,
27                     success:function(data){
28                         fn(data);
29                     }
30                 })
31             }
32     </script>

　　4.php

 1 <?php
 2 
 3 if($_GET['num']==0){
 4     echo '第一项的内容';
 5 }
 6 else if($_GET['num']==1){
 7     echo '第二项的内容';
 8 }
 9 else if($_GET['num']==2){
10     echo '第三项的内容';
11 }

　　5.end