向服务器发送请求以获取活动引导导航药丸

send request to server for active bootstrap nav-pills

本文关键字：导航 活动 获取 服务器 请求      更新时间：2023-09-26

我正在使用Twitter Bootstrap v3来创建"nav-pills"。 我的每个选项卡都有一个引导表，我每 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;
//      });
// }

您可以使用如下脚本：

  <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>

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

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

之后，您需要拨打LoadpData()。按照约定，建议在document.ready(function(){})块中调用LoadpData

这里有一个可能会有所帮助的jsFiddle：https://jsfiddle.net/superjisan/hnxLLknv/

相关文章：