如何使按钮链接到同一页面中的另一个功能?

Question

我正在创建一个页面，其中页面中的Next按钮将用户重定向到同一页面中的另一个选项卡/类。

我想要一个按钮，将我链接到下一个选项卡，这是Attachment选项卡使用#note作为参考。

我所尝试的是我试图把一个链接在按钮，但它不工作。还有其他的方法吗?而不是放一个链接到它?

<div class="col-md-12 text-right mt-4">
<button type="button" class="btn btn-md btn-primary" title="Add"><a href="next">Next</a></button>
</div>

<div class="default-tab">
<ul class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#next">Attachment</a>
</li>
</ul>
<div class="col-md-12 text-right mt-4">
<button type="button" class="btn btn-md btn-primary" title="Add">Next</button>
</div>

<div class="tab-pane fade" id="next">
<div class="pt-4">
<div class="col-lg-12">
......
</div>
</div>
</div>
</div>

Answer 1

我觉得你只需要加上"#"href。这样的:

<div class="col-md-12 text-right mt-4">
<button type="button" class="btn btn-md btn-primary" title="Add"><a href="#next">Next</a></button>

Answer 2

除了添加锚标记之外，可能的方法是使用javascript

HTML代码:

<div class="col-md-12 text-right mt-4">
<button id="next" type="button" class="btn btn-md btn-primary" title="Add">
Next
</button>
</div>

这里是javascript代码，

const btn = document.querySelector('button#next');
const target = '#next';
btn.onclick = function () {
window.location.href = window.location.origin + target;
}

Answer 3

我已经找到了我的解决方案，低于我所尝试的

首先我将在ul

中添加id="mytabs"

<ul class="nav nav-tabs" role="tablist" id="mytabs">

然后在按钮部分添加id="next"

<div class="col-md-12 text-right mt-4">
<button type="button" id="nextTab" class="btn btn-md btn-primary" title="Add">Next</button>
</div>

最后是javascript

<script>
$(function(){                                                  
$('#nextTab').click(function(e){                                                
e.preventDefault();
$('#mytabs a[href="#next"]').tab('show'); 
})
})
</script>