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

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

自卫队

Answer 1

css 和 jquery 方法可以正常工作。如果你想 select 多个元素，你可以使用 class select 或者。下面是单击按钮突出显示三个框并隐藏/显示文本区域的示例。

这里是 fiddle

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

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

On button click, effect multiple elements on page.

href

button