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

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

1 个答案: