编程语言不经常写的话，很容易忘记。
复习下。。。
今天，做一个简单的选项卡，数据请求用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