javascript - 按钮单击触发 anchor 选项卡

Question

我有一组带有散列 anchor 标签的 jquery 标签。

我想在单击提交按钮时触发第二个选项卡“#second”。

我使用了一些解决方案但没有用。

<script type="text/javascript">
$('#bt').click(function() {
   $('#ex').click();
});
</script>

<div id="tabs">
<ul id="tabbbs">
<li><a href="#first" id="ex"></li>
<li><a href="#second" id="ex"></li>
<li><a href="#third"></li>
</ul>

 <div id="first" >
 <p>LOREM IPSUM</p>
 </div>
 <div id="second" >
 <p>LOREM IPSUM</p>
 </div>
<div id="third" >
 <p>LOREM IPSUM</p>
 </div>
</div>
<button type="submit" id="bt" class="single_add_to_cart_button button alt">
  <?php echo esc_html( $product->single_add_to_cart_text() ); ?>OK</button>

Answer 1

当您尝试使用 jQuery 处理多个相同的 id 时，它们是不正确的:-

顺便说一句，你可以这样做:-

$('#bt').click(function() {
   $('ul li a[href="#second"]').click();
});

注意:- 需要在脚本代码之前添加 jQuery 库才能使其正常工作。

只是一个演示示例(当您单击链接或按钮类时将添加):-

$('#bt').click(function() {
 $('ul li a[href="#second"]').click();
});

$('a[href="#second"]').click(function() {
 $(this).addClass('active');
});

.active{
color:green;
font-size:20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs">
<ul id="tabbbs">
<li><a href="#first" id="ex">Click1</a></li>
<li><a href="#second" id="ex">Click2</a></li>
<li><a href="#third">Click3</a></li>
</ul>

 <div id="first" >
 <p>LOREM IPSUM</p>
 </div>
 <div id="second" >
 <p>LOREM IPSUM</p>
 </div>
<div id="third" >
 <p>LOREM IPSUM</p>
 </div>
</div>
<button type="submit" id="bt" class="single_add_to_cart_button button alt">OK</button>