jQuery标签：如何将Class从标签div添加到单独的UL标签？

问题描述

我试图在不使用jQuery Tabs UI的情况下使用jQuery设置标签导航。据我了解，当用户单击列表元素时，代码

用data-tab="X"抓取list元素，并添加类current，该类将为该链接设置opacity: 1（默认值：50％），
然后从标签内容部分删除current类，并显示具有相同data-tab属性的相应div。

我试图通过单击按钮来复制相同的过程。这似乎可行，因为它从.tab-link类中删除了当前类，但没有将当前类添加到相应的ul.tabs li元素中。这会造成混乱的用户体验，因为当用户按下下一个/上一个按钮时，尚不清楚哪个部分/选项卡处于活动状态/当前状态。

当我单击下一个和上一个按钮时，如何将当前课程添加到相应的ul.tabs li中？这是jQuery问题还是CSS问题？

$(document).ready(function () {
  $('ul.tabs li').click(function () {
    var tab_id = $(this).attr('data-tab');
    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');
    $(this).addClass('current');
    $("#" + tab_id).addClass('current');
  });

  $('button.next-previous').click(function () {
    var tab_id = $(this).attr('data-tab');
    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');
    $(this).addClass('current');
    $("#" + tab_id).addClass('current');
    $('li').find('ul:first').addClass('moveme');
    $('html,body').animate({
      scrollTop: $("#tabsNav").offset().top
    },2000);
  });


});

:root {
  --darkgreen: #203631;
  --background: #f5f5f5;
  --pinkaccent: #f49393;
  --white: #fff;
  --black: #000;
}

.formButton {
  display: inline-block;
  border-radius: 4px;
  background-color: var(--pinkaccent);
  border: none;
  color: #ffffff;
  text-align: center;
  font: italic 600 18px var(--secondfont);
  padding: 1rem 2rem;
  margin-top: 10px;
  cursor: pointer;
}

.checkoutNumbers {
  width: 30px;
  height: 30px;
}


/*--------------------------------------------------------------
    # My Account - Tabs
    --------------------------------------------------------------*/


/*/Links/buttons container /*/

ul.tabs {
  display: block;
  margin: 0 auto;
  text-align: center;
  padding: 0px;
  list-style: none;
}


/*/Login & Register Links/*/

ul.tabs li {
  background: none;
  text-align: center;
  color: var(--darkgreen);
  font-family: var(--mainfont);
  display: inline-block;
  padding: 10px 15px;
  margin: 0 auto;
  font-size: 2rem;
  opacity: 50%;
  cursor: pointer;
}


/*/Current and selected link/*/

ul.tabs li.current {
  opacity: 1;
}


/*/Content Class/*/

.tab-content {
  display: none;
  padding: 15px;
  animation: fadeEffect 1.5s;
}


/*/Current Content Class/*/

.tab-content.current {
  display: inherit;
}


/* Go from zero to full opacity */

@keyframes fadeEffect {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="tabsNav">
  <ul class="tabs">
    <li class="tab-link current" data-tab="tab-1" data-tab="">
      <span>Billing</span>
    </li>
    <li class="tab-link" data-tab="tab-2">
      <span>Delivery<span>
    </li>
    <li class=" tab-link" data-tab="tab-3">
      <span>Review &amp; Payment</span>
    </li>
  </ul>
</div>
<!--Tabs Content-->
<div id="tab-1" class="tab-content current">
  <p>Billing tab.</p>
  <button data-tab="tab-2" class="next-previous formButton checkout">Continue</button>
</div>
<div id="tab-2" class="tab-content">
  <p>Delivery Tab</p>
  <button data-tab="tab-3" class="next-previous formButton checkout ">Continue</button>
  <button data-tab="tab-1" class="next-previous formButton checkout">Back</button>
</div>
<div id="tab-3" class="tab-content">
  <p>Payment tab.</p>
</div>

解决方法

您只需选择带有data-tab和tab_id的li，例如

$("*[data-tab=\"" + tab_id+"\"").addClass('current');

这将使用您创建的tab_id变量，并寻找一个data-tab值设置为该元素的元素，例如data-tab="tab-2"

您可以在这里看到它的工作状态：

$(document).ready(function () {
            $('ul.tabs li').click(function () {
                var tab_id = $(this).attr('data-tab');
                $('ul.tabs li').removeClass('current');
                $('.tab-content').removeClass('current');
                $(this).addClass('current');
                $("#" + tab_id).addClass('current');
            });

            $('button.next-previous').click(function () {
                var tab_id = $(this).attr('data-tab');
                $('ul.tabs li').removeClass('current');
                /* find the li that has a data-tab attribute matching this tab_id*/
                $("*[data-tab=\"" + tab_id+"\"").addClass('current');
                $('.tab-content').removeClass('current');
                $(this).addClass('current');
                $("#" + tab_id).addClass('current');
                $('li').find('ul:first').addClass('moveme');
                $('html,body').animate({
                    scrollTop: $("#tabsNav").offset().top
                },2000);
            });
        });

:root {
        --darkgreen: #203631;
        --background: #f5f5f5;
        --pinkaccent: #f49393;
        --white: #fff;
        --black: #000;
    }

    .formButton {
        display: inline-block;
        border-radius: 4px;
        background-color: var(--pinkaccent);
        border: none;
        color: #ffffff;
        text-align: center;
        font: italic 600 18px var(--secondfont);
        padding: 1rem 2rem;
        margin-top: 10px;
        cursor: pointer;
    }

    .checkoutNumbers {
        width: 30px;
        height: 30px;
    }


    /*--------------------------------------------------------------
    # My Account - Tabs
    --------------------------------------------------------------*/

    /*/Links/buttons container /*/
    ul.tabs {
        display: block;
        margin: 0 auto;
        text-align: center;
        padding: 0px;
        list-style: none;
    }

    /*/Login & Register Links/*/
    ul.tabs li {
        background: none;
        text-align: center;
        color: var(--darkgreen);
        font-family: var(--mainfont);
        display: inline-block;
        padding: 10px 15px;
        margin: 0 auto;
        font-size: 2rem;
        opacity: 50%;
        cursor: pointer;
    }

    /*/Current and selected link/*/
    ul.tabs li.current {
        opacity: 1;
    }

    /*/Content Class/*/
    .tab-content {
        display: none;
        padding: 15px;
        animation: fadeEffect 1.5s;
    }

    /*/Current Content Class/*/
    .tab-content.current {
        display: inherit;
    }

    /* Go from zero to full opacity */
    @keyframes fadeEffect {
        from {
            opacity: 0;
        }

        to {
            opacity: 1;
        }
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="tabsNav">
        <ul class="tabs">
            <li class="tab-link current" data-tab="tab-1" data-tab="">
                <span>Billing</span>
            </li>

            <li class="tab-link" data-tab="tab-2">
                <span>Delivery<span>
            </li>
            <li class=" tab-link" data-tab="tab-3">
                <span>Review &amp; Payment</span>
            </li>
        </ul>
    </div>
    <!--Tabs Content-->

    <div id="tab-1" class="tab-content current">
        <p>Billing tab.</p>
        <button data-tab="tab-2" class="next-previous formButton checkout">Continue</button>
    </div>
    <div id="tab-2" class="tab-content">
        <p>Delivery Tab</p>
        <button data-tab="tab-3" class="next-previous formButton checkout ">Continue</button>
        <button data-tab="tab-1" class="next-previous formButton checkout">Back</button>
    </div>
    <div id="tab-3" class="tab-content">
        <p>Payment tab.</p>
    </div>

html javascript tabs

jQuery标签：如何将Class从标签div添加到单独的UL标签？

问题描述

解决方法

相关问答