如何修改JS实现同一页面多个Umbraco Tabbed Content块独立运行？

问题出在你的JS代码是全局选择所有匹配的tab元素，点击第二个区块的导航时，会修改第一个区块的tab内容，导致第二个区块无法正常工作。只需要基于点击元素的上下文限定选择范围，就能让每个区块独立运行。

修改后的JS代码 #

$('section.tabs nav li').click(function(){
    var tabIndex = $(this).index();
    // 获取当前点击li所属的tabs区块容器
    var $currentTabSection = $(this).closest('section.tabs');
    
    // 切换当前区块内的导航激活状态
    $(this).addClass('active').siblings().removeClass('active');

    // 仅在当前区块内切换对应tab的激活状态
    $currentTabSection.find('ul.tabs li.tab').eq(tabIndex).addClass('active').siblings().removeClass('active');
});

完整可运行代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style>
section.tabs main.tabsContainer ul.tabs li.tab{
    display:none;
}

section.tabs main.tabsContainer ul.tabs li.tab.active{
    display:flex;
}
</style>
<h1>
  First Tabbed Section
</h1>
<section class="tabs">
      <nav>
          <ul>
              <li class="active">
                  <button>
                      Click for Tab 1
                  </button>
              </li>
              <li>
                  <button>
                      Click for Tab 2
                  </button>
              </li>
              <li>
                  <button>
                      Click for Tab 3
                  </button>
              </li>
          </ul>
      </nav>
      <main class="tabsContainer">
          <ul class="tabs">
              <li class="tab active">
                  <h2>
                      Tab 1
                  </h2>
              </li>
              <li class="tab">
                  <h2>
                      Tab 2
                  </h2>
              </li>
              <li class="tab">
                  <h2>
                      Tab 3
                  </h2>
              </li>
          </ul>
      </main>
</section>

<hr />

<h1>
  Second Tabbed Section
</h1>
<section class="tabs">
      <nav>
          <ul>
              <li class="active">
                  <button>
                      Click for Tab 1
                  </button>
              </li>
              <li>
                  <button>
                      Click for Tab 2
                  </button>
              </li>
              <li>
                  <button>
                      Click for Tab 3
                  </button>
              </li>
          </ul>
      </nav>
      <main class="tabsContainer">
          <ul class="tabs">
              <li class="tab active">
                  <h2>
                      Tab 1
                  </h2>
              </li>
              <li class="tab">
                  <h2>
                      Tab 2
                  </h2>
              </li>
              <li class="tab">
                  <h2>
                      Tab 3
                  </h2>
              </li>
          </ul>
      </main>
</section>
<script>
$('section.tabs nav li').click(function(){
    var tabIndex = $(this).index();
    var $currentTabSection = $(this).closest('section.tabs');
    
    $(this).addClass('active').siblings().removeClass('active');

    $currentTabSection.find('ul.tabs li.tab').eq(tabIndex).addClass('active').siblings().removeClass('active');
});
</script>

关键修改说明 #

• 新增$(this).closest('section.tabs')：找到当前点击的导航li所在的父级tabs区块，把操作范围限定在这个区块内
• 把全局选择器$('section.tabs ul.tabs li.tab')改成$currentTabSection.find('ul.tabs li.tab')：只操作当前区块内的tab内容，避免影响其他区块

这样两个tabbed content区块就能完全独立运行，互相不干扰了。

内容的提问来源于stack exchange，提问作者cheesycoder