Question

我有三个标签，可在单击下一个按钮时在锚标签not 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);
});

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>

单击下一步几秒钟后，“移动”选项卡不起作用

1 个答案: