关于数据绑定的小问题

Question

<!-- taget -->
<div id="tb1"></div>
<div id="tb2"></div>
<div id="tb3"></div>
<!-- box -->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

问题：点击tb显示对应的box 怎么写？
还有就是box里面的数据比较多的话，需要怎么加载？？

Answer 1

<!-- taget -->
<div id="parentDiv">
<div id="tb1" val="1">tab1</div>
<div id="tb2" val="2">tab2</div>
<div id="tb3" val="3">tab3</div>
</div>
<!-- box -->
<div class="box1" style="display: none;">box1</div>
<div class="box2" style="display: none;">box2</div>
<div class="box3" style="display: none;">box3</div>

加上一个val属性 

 $("#parentDiv div").click(function(){
      
        var val= $(this).attr("val")
        var box=".box"+val;
        $(box).show(); 
          
      })
      

Answer 2

<!-- taget -->
<div class="tbs">
  <div id="tb1"></div>
  <div id="tb2"></div>
  <div id="tb3"></div>
</div>
<!-- box -->
<div class="boxes">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
</div>

可以用div把target和box分别包起来，然后这样绑定点击事件。

$('.tbs > div').click(function () {
  var num = $(this).attr('class').substring(2);
  $('#box' + num).show().siblings().hidden();
});

如果box里面数据多，加载慢，可以切换的时候先放一个转圈的加载动画，数据加载成功后隐藏动画。

Answer 3

http://www.w3cmark.com/demo/d... 把事件换成 click 就行了，实际就是切换显示隐藏，所有的 dom 在首屏已经全部加载了，数据量过大的话可以在具体的box里实现分页加载或者监听滚动事件加载，

Answer 4

默认请求第一个选择tab1的接口，后面点击那个tab就请求对应的接口，假如有3个tab就搞接口api比较好。