我正在尝试使用 javascript 将类添加到我的部分标签,但无法做到这一点

问题描述 投票:0回答:0

我试图制作 netflix(旧版本)的克隆,当我尝试使用 javascript 在部分之间切换时遇到了一些问题,我想让类“被选中”循环通过我的部分标签,但我我无法做到这一点。 'is-selected' 在“a”标签中循环但不在“section”标签中循环。

HTML

<div id="features">
        <nav>
            <div class="center columns size-80">
                <a href="#" class="column is-selected" data-id="cancelanytime">
                    <img src="./images/cancel-close-exit-out-svgrepo-com.svg" alt="Cancel anytime">
                    <h2>
                        No Commitments
                        <br />
                        Cancel online anytime
                    </h2>
                </a>

                <a href="#" class="column" data-id="watchanywhere">
                    <img src="./images/phone-tablet-and-laptop-svgrepo-com.svg" alt="Watch anywhere">
                    <h2>
                        Watch Anywhere
                    </h2>
                </a>

                <a href="#" class="column" data-id="pickprice">
                    <img src="./images/pricetag2-svgrepo-com.svg" alt="pick price">
                    <h2>
                        Pick Your Price
                    </h2>
                </a>
            </div>
            <article>
                <section class="is-selected"  data-id="cancelanytime">
                    About Feature 1
                </section>
                <section data-id="watchanywhere">
                    About Feature 2
                </section>
                <section data-id="pickprice">
                    About Feature 3
                </section>
            </article>
        </nav>
    </div>

CSS

#features > nav a.is-selected{
    border-bottom: 5px solid #e50914;
    color: white;
}

#features > nav > article > section{
    display: none;
    padding: 40px 0;
}

#features > nav > article > section.is-selected{
    display: block;
}

Javascript

$(function(){
    var tabs = $('#features > nav a');
    var tabsContent = $('#feature > nav > article > section');

    tabs.click(function(e){
        e.preventDefault();

        var that = $(this);

        tabs.removeClass('is-selected');
        that.addClass('is-selected');
        tabsContent.removeClass('is-selected');
        tabsContent.filter((i, tab) => $(tab).data('id') === that.data('id'))
        .addClass('is-selected');
    });
});
javascript html css frontend netflix
© www.soinside.com 2019 - 2024. All rights reserved.