javascript - 单击下一个按钮几秒钟后，移动选项卡不起作用

Question

我有三个选项卡，当单击下一步按钮时，它们在锚标记上添加或删除活动类而不是 li。

我试过当我点击下一个按钮时它被禁用几秒钟然后移动到下一个选项卡按钮但问题是移动不起作用。

这是html的代码

<ul class="nav nav-pills" style="width: 1050px">
<li class="nav-item"><a class="active" href="#Race" data-toggle="tab">Race</a>
</li>
<li class="nav-item"><a class="active" href="#Ace" data-toggle="tab">Ace</a>
</li>
<li class="nav-item"><a class="active" href="#Deep" data-toggle="tab">Deep</a>
</li>
</ul>
<div class="tab-content">
<!-- Race -->
<div class="tab-pane active" id="Race">

<button class="btn-style" type="submit">Next</button>
</div>
<!-- ACE -->
<div class="tab-pane" id="Ace">

    <button class="btn-style" type="submit">Next</button>
</div>

和jQuery代码

$(".btn-style").click(function () {
    $(".btn-style").prop("disabled", true );
    setTimeout(function() {
        $(".btn-style").prop("disabled", false );


var target = $(".nav-pills li.nav-item a.active");
var sibbling;
if ($(this).text() === "Next") {
    sibbling = target.next();
} else {
    //sibbling = target.prev();
}
if (sibbling.is("li")) {
    target.removeClass("active")
    sibbling.addClass("active").children("a").tab("show");
}
}, 3000);
});

标签： javascripthtml

Answer 1

Target将是一个数组，因为一个类有多个锚点active。您可以尝试像CodePen这样更简单的方法

<style>
/* Checked Tabs */

.tabs-checked input:nth-of-type(1):checked ~ .tab:nth-of-type(1),
.tabs-checked input:nth-of-type(2):checked ~ .tab:nth-of-type(2),
.tabs-checked input:nth-of-type(3):checked ~ .tab:nth-of-type(3) 
{
  display: block;
}
.tab-area {
  width: 21%;
  margin: 2%;
}
input { 
  display: none;
}
.tab {
  clear: both;
  background: #ddd;
  padding: 25px;
  display: none;
  height: 180px;
  border: 1px solid #bbb;
}
.tab-link:focus,
.tab-link:hover,
#tab-C:checked ~ label:nth-of-type(3),
#tab-B:checked ~ label:nth-of-type(2),
#tab-B:not(:checked) ~ #tab-C:not(:checked) ~ label:nth-of-type(1) {
  background: #ddd;
}
.tab-link:focus:after,
.tab-link:hover:after,
#tab-C:checked ~ label:nth-of-type(3):after,
#tab-B:checked ~ label:nth-of-type(2):after,
#tab-B:not(:checked) ~ #tab-C:not(:checked) ~ label:nth-of-type(1):after {
  position: absolute;
  content: "";
  margin: 5px 0 0 0;
  width: 55px;
  height: 1px;
  display: block;
  background: #ddd;
}
.tab-link {
  text-transform: uppercase;
  font-size: 10px;
  cursor: pointer;
  color: #555;
  font-weight: bold;
  text-decoration: none;
  display: block;
  float: left;
  width: 55px;
  padding: 5px 0;
  text-align: center;
  background: #ccc;
  border: 1px solid #bbb;
  border-left: 0;
  border-bottom: 0;
}
.tab-link:hover {
  background: #eee;
  color: #666;
}

.tab-link:nth-of-type(1) {
  border-left: 1px solid #bbb;
}
</style>
<form class="tab-area tabs-checked" name="temp">

    <input checked type="radio" name="tab" id="tab-A" value="1"/>
    <input type="radio" name="tab" id="tab-B" value="2"/>
    <input type="radio" name="tab" id="tab-C" value="3"/>

    <label class="tab-link" for="tab-A">Tab 1</label>
    <label class="tab-link" for="tab-B">Tab 2</label>
    <label class="tab-link" for="tab-C">Tab 3</label>

    <article class="tab">
        <h3>I love :checked. :checked is great. If only I could toggle any item and not just input elements we'd be golden.</h3>
    </article>
    <article class="tab">
        <h3>Tab 2</h3>
        <p>Lorem Ipsum Dolor Sit</p>
    </article>
    <article class="tab">
        <h3>Tab 3</h3>
        <p>Lorem Ipsum Dolor Sit</p>
    </article>

    <h2 class="title">Checked Tabs</h2>
    <p><strong>Independent, Default Selected</strong></p>
    <p>Works In: Chrome(latest), Opera(Latest), FireFox(Latest), IE9</p>

</form> 

<div >
<button onclick="doNext();" id="btn">NEXT</button>
</div>

<script>
function doNext()
{
  btn.disabled = true;
  setTimeout(function()
  {
    document.temp.tab.value = document.temp.tab.value % 3 + 1;
    btn.disabled = false;
  },3000)
}
</script>