首页 > 解决方案 > CSS / JS标签在点击时不响应

问题描述

我在此页面 上无法使用的导航(带有标签的结构)遇到问题。使用完全相同的方式在此页面上正常工作以包含它。

单击左上角的“挪威”会打开导航,但无法打开“美洲、南非”等选项卡。)

这是php我用来包含它的:

<div class="outlet__box">
  <div class="outlet__box_content">
   <?php include '../../menu.php'; ?>
  </div>
</div>

html导航是这样的:

<ul class="tabs">
    <li class="active">
      <span class="h2 tabs__headline trigger-select-tab">Europe
        <span class="caret visible-xs"></span>
      </span>
    </li>
    <li>
      <span class="h2 tabs__headline trigger-select-tab">Americas
        <span class="caret visible-xs"></span>
      </span>
    </li>
    <li>
      <span class="h2 tabs__headline trigger-select-tab">Middle East and Africa
        <span class="caret visible-xs"></span>
      </span>
    </li>
    <li>
      <span class="h2 tabs__headline trigger-select-tab">Asia and Oceanic
        <span class="caret visible-xs"></span>
      </span>
    </li>
</ul>

问题与js有关吗?(我检查了控制台,没有发现任何错误)。

有小费吗?

提前致谢

标签: javascripthtmlcss

解决方案


将此代码用于导航,一切就绪...

$('#language-outlet-wrapper .outlet .tabs>li').click(function(index){
    var ind = $('#language-outlet-wrapper .outlet .tabs>li').index(this);
    $(this).addClass('active').siblings().removeClass('active');
    $(this).parent().parent().find('ul.tab_content>li').each(function(index){
        if(ind == index){
            $(this).addClass('active').siblings().removeClass('active');
        }
    });
});

推荐阅读