Question

我正在使用Twitter Bootstrap v3创建“nav-pills”。我的每个选项卡都有一个Bootstrap表，我每5秒更新一次值。我的一个表更新的Java脚本代码如下所示：

function LoadpData()
{ 
  $(function() {
  $.getJSON(..........);
  return false;
});
};

setInterval( LoadpData, 5000);

我的HTML文件的子部分：

<ul class="nav nav-pills" id="Tabs">
        <li class="active"><a href="#Press" data-toggle="tab">Pr</a></li>
        <li><a href="#Fl" data-toggle="tab">Fl</a></li>
        <li><a href="#Te" data-toggle="tab">Te</a></li>
        <li><a href="#Pu" data-toggle="tab">Pu</a></li>
        <li><a href="#Va" data-toggle="tab">Co</a></li>
</ul>

我想要做的是找到哪个选项卡处于活动状态，然后仅更新该选项卡上的表的数据。所以我想在每个LoadData（）JS函数的顶部添加一个if语句来检查并查看该选项卡是否处于活动状态，如果是，则将.getJSON请求发送到服务器以获取值，否则什么都不做。我搜索并发现我应该能够通过使用此选择器$（'＃Tabs li.active'）找到活动选项卡。此外，我的每个选项卡都有一个唯一的href属性，所以使用这个选择器$（'＃Tabs a [href =“＃fl”]'），我应该能够获取jquery对象并查看它是否是活动的。我是jquery的新手，如果你能帮助我找到解决方案，我感谢你。

function LoadpData()
    {     
// if ($('#Tabs li.active') = $('#Tabs a[href="#Fl"]')){ 
//     $(function() {
//      $.getJSON(..........);
//      return false;
//      });
// }

Answer 1

您可以使用以下脚本：

  <script>
    $(document).ready(function() {
      setInterval(function() {
        findAndUpdate();
      }, 3000);

      function findAndUpdate() {
        // Find the active tab 
        var activeTab = $("#tabs").find("li.active");
        var activeTabIndex = activeTab.index();

        // Update the table according to index
        // var str = "";
        switch (activeTabIndex) {
          case 0:
            LoadpData0();
            //str="1";
            // update code for tab 0 table
            break;
          case 1:
            LoadpData1();
            //str="2";
            // update code for tab 1 table
            break;
          case 2:
            LoadpData2();
            //str="3";
            // update code for tab 2 table
            break;
          case 3:
            LoadpData3();
            //str="4";
            // update code for tab 3 table
            break;
          default:
            // default case             
        }
        //alert(str);
      }

      // if you want it should also be updated as soon as a user switches to a new tab, then    
      $("#tabs").on("click", "li", function() {
        setTimeout(function() {
          findAndUpdate();
        }, 30);
        // setting timeout is required as the tab should first change and then this function should be called
      });
    });
  </script>

Answer 2

您可以在点击时在html值组上设置jquery侦听器。

function LoadpData() {
    $('ul.nav li a').click(function(){
    var $this = $(this);
    $this.text({your JSON values can go here});
  })
}

之后你需要拨打LoadpData()。按照惯例，建议您在LoadpData块

中调用document.ready(function(){})

这是一个可能有用的jsFiddle：https://jsfiddle.net/superjisan/hnxLLknv/

向服务器发送活动bootstrap nav-pills的请求

2 个答案: