Question

我尝试点击菜单中的链接打开标签（div）但我找不到解决方案。

<div>   
  <ul>
    <li><a href="#tabs1" class="select">tabs1</a></li>
    <li><a href="#tabs2">tabs2</a></li>   
  </ul> 
</div>

<div id="tabs1" class="active"></div>
<div id="tabs2"></div>

当我打开表单1.html（没有标签）并单击菜单以打开2.html中的tabs2时，它不起作用。有任何想法吗？谢谢！

更新 - 这是我的脚本。

$("a#tabs-1").click(function () {
    $("a#tabs-2").removeClass("active");
    $(this).addClass("active");
});
$("a#tabs-2").click(function () {
    $("a#tabs-1").removeClass("active");
    $(this).addClass("active");
    return false;
});

Answer 1

这是最简单的代码，我可以为您提供最简单的CSS。这是fiddle。

$(".tabs1").click(function () {
    $("#tabs2").removeClass("active");
    $("#tabs1").addClass("active");
});
$(".tabs2").click(function () {
    $("#tabs1").removeClass("active");
    $("#tabs2").addClass("active");
});

#tabs1, #tabs2 {
    display: none;
}
#tabs1.active, #tabs2.active {
    display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>   
  <ul>
    <li><a href="#tabs1" class="select tabs1">tabs1</a></li>
    <li><a href="#tabs2" class="tabs2">tabs2</a></li>   
  </ul> 
</div>

<div id="tabs1" class="active">tab1</div>
<div id="tabs2">tab2</div>

希望有所帮助。

Answer 2

您可以执行类似

的操作

＆＃13;

$('.tabs li').click(function(e) {
  var $this = $(this),
    $tab = $($this.find('a').attr('href'));
  $this.addClass('select');
  $this.siblings().removeClass('select');
  $tab.show().addClass('active');
  $('.tab').not($tab).hide().removeClass('active');

  e.preventDefault();
}).filter(':has(.select)').click();

＆＃13;

.tab {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>   
  <ul class="tabs">
    <li><a href="#tabs1" class="select">tabs1</a></li>
    <li><a href="#tabs2">tabs2</a></li>   
  </ul> 
</div>

<div id="tabs1" class="tab active">tabs1</div>
<div id="tabs2" class="tab">tabs2</div>

＆＃13;

Answer 3

我已将tabsDiv课程添加到div，以使其顺利进行。

<div>   
  <ul>
    <li><a href="#tabs1" class="select">tabs1</a></li>
    <li><a href="#tabs2">tabs2</a></li>   
  </ul> 
</div>

<div id="tabs1" class="tabsDiv active"></div>
<div id="tabs2" class="tabsDiv"></div>

当您点击a时，只需将class select添加到该特定a，然后从其所有兄弟姐妹中删除此类。然后获取所点击的href的{{1}}，并使用a div的{{1}} id。{/ p>

不要忘记添加href来停止点击active代码的默认行为。

e.stopProagation()

如何点击链接（菜单）打开标签？

3 个答案: