Question

当我点击第一页上的“继续1”按钮时，它会将我引导至第二个标签页。但是标签2标题不会变为深色。我该怎么做？

- 另一个问题，当我点击“继续1”按钮时，它会将我引导至第二个标签，但第二个标签对齐关闭。为什么会那样？

以下是FIDDLE示例：

HTML

<div class="main-content">
      <ul class="tabs">
        <li>
          <input type="radio" checked name="tabs" id="tab1">
          <label for="tab1">1<div class="train-stop-text" id="id1">1</div></label>
              <div id="tab-content1" class="tab-content animated fadeIn">
                    1
                  <br>
                  <button type="button" class="btn" id="previous1">Previous 1</button>

                  <button type="button" class="btn" id="continue1">Continue 1</button>
              </div> 
        </li>


        <li>
          <input type="radio" name="tabs" id="tab2">
          <label for="tab2">2<div class="train-stop-text" id="id2">2</div></label>
              <div id="tab-content2" class="tab-content animated fadeIn">
                 2
                  <br>
                  <button type="button" class="btn" id="previous2">Previous 2</button>

                  <button type="button" class="btn" id="continue2">Continue 2</button>
              </div>
        </li>

        <li>
          <input type="radio" name="tabs" id="tab3">
              <label for="tab3">3<div class="train-stop-text" id="id3">3</div></label>
              <div id="tab-content3" class="tab-content animated fadeIn">
                  3
                  <br>
                  <button type="button" class="btn" id="previous3">Previous 3</button>

                  <button type="button" class="btn" id="continue3">Continue 3</button>
              </div>
        </li>
      </ul>


      </div>

CSS

.tabs input[type=radio] {
    position: absolute;
    top: -9999px;
    left: -9999px;
}
.tabs {
    width: 85%;
    float: none;
    list-style: none;
    position: relative;
    padding: 0;
    /* margin: 75px auto; */
}
.tabs li{
    float: left;
}
.tabs label {
    /*display: block;*/
    width:30px;
    height:30px;
    text-align:center;
    padding:3px;
    border-radius: 25px;
    border:2px solid #d1d9e5;
    color: #d1d9e5;
    font-size: 14px;
    font-weight: normal;
    background: rgba(255,255,255,0.2);
    cursor: pointer;
    position: relative;
    top: 3px;
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    -o-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
.tabs label:hover {
    background: rgba(255,255,255,0.5);
    top: 0;
}

[id^=tab]:checked + label {
    background: #fff;
    color: #8a8f96;
    border: 2px solid #8a8f96;
}

[id^=tab]:checked ~ [id^=tab-content] {
    display: block;
    padding-left: 250px;
}
.tab-content{
    z-index: 2;
    display: none;
    text-align: left;
    width: 100%;
    font-size: 20px;
    line-height: 140%;
    padding-top: 10px;
    position: absolute;
    top: 100px;
    left: 0;
    box-sizing: border-box;
    -webkit-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    animation-duration: 0.5s;
}

的Javascript

$(document).ready(function () {
    $("#continue1").click(function () {
        $("#tab-content3").hide();
        $("#tab-content2").show();
        $("#tab-content1").hide();
    });  
});

谢谢！

Answer 1

较暗的边框与选中的单选按钮（[id^=tab]:checked + label {}）相关联，因此将tab2无线电标记为已选中

$(document).ready(function () {
    $("#continue1").click(function () {
        $("#tab-content3").hide();
        $("#tab-content2").show();
        $("#tab-content1").hide();
        $('#tab2').prop('checked',true)
    });  
});

演示：Fiddle

Answer 2

您是否考虑过使用预先存在的解决方案来实现此功能？

示例：

http://sachinchoolur.github.io/lightslider/

http://codecanyon.net/item/lush-content-slider/3918728

http://cssslider.com/

这些方面的东西可以为你节省很多时间。

Answer 3

您还需要删除tab1中的checked属性，以免第一个选项卡突出显示。

$(document).ready(function () {
$("#continue1").click(function () {
    console.log("asdf");

    $("#tab-content3").hide();
    $("#tab-content2").show();
    $("#tab1").removeAttr("checked");
    $("#tab2").attr("checked",true);
    $("#tab-content1").hide();
});

}）;

单击上一个或继续按钮时更改选项卡样式

3 个答案: