Change Tabs style, when clicking previous or continue button

Question

When I clicked on 'continue 1' button on the first page it will direct me to second tabs. But the tab 2 header doesn't change to dark color. How should I do that?

-Another question, when i clicked on the 'continue 1' button, it directs me to second tabs, but the second tabs alignment is off. Why is it like that?

Here is the FIDDLE example:

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();
    });  
});

Thank you!

Answer 1

You need to remove the checked attribute in tab1 too so your first tab does not highlight.

$(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();
});  

});

Answer 2

Have you thought about using a pre-existing solution for this functionality?

Examples:

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

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

http://cssslider.com/

Something along these lines could save you a lot of time.

Answer 3

The darker border is associated with the checked radio button([id^=tab]:checked + label {}) so mark the tab2 radio as checked

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

Demo: Fiddle