javascript - 关于数据绑定的小问题

Question

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

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

Answer 1

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

加上一个val属性 

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

Answer 2

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

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

$('.tbs > p').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比较好。