单击按钮时，会影响页面上的多个元素。

Question

我在这里很迷茫，所以任何帮助表示赞赏！

我正在寻找当一个按钮（总共 3 个按钮）被点击时它会影响多个元素：1. 它突出显示 3 个框。 2. 它显示一个文本区域。

我学会了多个id的不工作，认为CSS可以与jquery一起工作（对jquery不太熟悉。

// 3 个按钮的代码：//

<div class="row">
                <div class="col-sm-2 col-xs-4 col-sm-offset-3 center">
                    <p><a href="#snav-content1 #snav-content2 #snav-content6 #snav-content10" class="button button-light button-border button-rounded uppercase nomargin active" data-toggle="tab"><?php the_field('button_1'); ?></a></p>
                </div>
                <div class="col-sm-2 col-xs-4 center">
                    <p><a href="#snav-content5 #snav-content7 #snav-content8 #snav-content11" class="button button-light button-border button-rounded uppercase nomargin" data-toggle="tab"><?php the_field('button_2'); ?></a></p>
                </div>
                <div class="col-sm-2 col-xs-4 center">
                    <p><a href="#snav-content3 #snav-content4 #snav-content5 #snav-content12" class="button button-light button-border button-rounded uppercase nomargin" data-toggle="tab"><?php the_field('button_3'); ?></a></p>
                </div>
            </div>

// 框区域的代码（点击时会突出显示）：//

<div class="panel-heading">
                <h2><?php the_field('decision_moments_section_title'); ?></h2>
                    <ul class="nav nav-tabs-v2">
                        <li class="active col-sm-1-8 col-xs-3 find-mnt">
                            <a id="snav-content1" data-toggle="tab" class="mnt-hover">
                                <img class="moment-logo" src="/wp-content/uploads/2018/01/Find.png" alt="Find">
                                <h4>Find</h4>
                            </a>
                        </li>
                        <li class="col-sm-1-8 col-xs-3 join-mnt">
                            <a id="snav-content2" data-toggle="tab" class="mnt-hover">
                                <img class="moment-logo" src="/wp-content/uploads/2018/01/Join.png" alt="Join">
                                <h4>Join</h4>
                            </a>
                        </li>
                        <li class="col-sm-1-8 col-xs-3 consume-mnt">
                            <a id="snav-content3" data-toggle="tab" class="mnt-hover">
                                <img class="moment-logo" src="/wp-content/uploads/2018/01/Consume.png" alt="Consume">
                                <h4>Consume</h4>
                            </a>
                        </li>
                        <li class="col-sm-1-8 col-xs-3 upgrade-mnt">
                            <a id="snav-content4" data-toggle="tab" class="mnt-hover">
                                <img class="moment-logo" src="/wp-content/uploads/2018/01/Upgrade.png" alt="Upgrade">
                                <h4>Upgrade</h4>
                            </a>
                        </li>
                        <li class="col-sm-1-8 col-xs-3 downgrade-mnt" class="mnt-hover">
                            <a id="snav-content5 snav-content3" data-toggle="tab">
                                <img class="moment-logo" src="/wp-content/uploads/2018/01/Downgrade.png" alt="Downgrade">
                                <h4>Downgrade</h4>
                            </a>
                        </li>
                        <li class="col-sm-1-8 col-xs-3 bill-mnt">
                            <a id="snav-content6" data-toggle="tab" class="mnt-hover">
                                <img class="moment-logo" src="/wp-content/uploads/2018/01/Bill.png" alt="Bill">
                                <h4>Bill</h4>
                            </a>
                        </li>
                        <li class="col-sm-1-8 col-xs-3 leave-mnt">
                            <a id="snav-content7" data-toggle="tab" class="mnt-hover">
                                <img class="moment-logo" src="/wp-content/uploads/2018/01/Leave.png" alt="Winback">
                                <h4>Leave</h4>
                            </a>
                        </li>
                        <li class="col-sm-1-8 col-xs-3 winback-mnt">
                            <a id="snav-content8" data-toggle="tab" class="mnt-hover">
                                <img class="moment-logo" src="/wp-content/uploads/2018/01/Winback.png" alt="Winback">
                                <h4>Winback</h4>
                            </a>
                        </li>
                    </ul>
            </div>

// 点击时显示的文本区域代码： //

                    <div class="tab-content">
                    <div class="tab-pane fade in active" id="snav-content10">
                        <div class="row">
                            <div class="col-sm-12">
                                <?php the_field('section_1'); ?>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="snav-content11">
                        <div class="row">
                            <div class="col-sm-12">
                                <?php the_field('section_2'); ?>
                            </div>
                        </div>
                    </div>
                    <div class="tab-pane fade" id="snav-content12">
                        <div class="row">
                            <div class="col-sm-12">
                                <?php the_field('section_3'); ?>
                            </div>
                        </div>
                    </div>
                </div>   

此代码取自网站上的其他地方，其中框是被点击的区域，仅影响文本区域。

    sfsaf 

sdf

Answer 1

使用 jquery 方法的 css 可以正常工作。如果要选择多个元素，可以使用类选择器。这是一个单击按钮的示例，突出显示三个框并隐藏/显示文本区域。

这是小提琴

https://jsfiddle.net/2e73h9jp/

// find elements
var banner = $(".banner-message")
var button = $("button")

// handle click and add class
button.on("click", function(){
  banner.toggleClass("alt")
  $('textarea').toggleClass("hide");
})