При нажатии кнопки, эффект нескольких элементов на странице. - PullRequest
Новая
       12

При нажатии кнопки, эффект нескольких элементов на странице.

0 голосов
/ 03 января 2019

Я совершенно растерялся, поэтому любая помощь приветствуется!

Я ищу, когда нажимается кнопка (всего 3 кнопки), чтобы она затрагивала несколько элементов: 1. она выделяет 3 поля.2. Он показывает область текста.

Я узнал, что несколько идентификаторов не работают, думаю, 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

1 Ответ

0 голосов
/ 03 января 2019

css с подходом jquery будет работать нормально.если вы хотите выбрать несколько элементов, вы можете использовать селектор класса.Вот пример, нажав кнопку, выделяет три поля и скрывает / показывает текстовую область.

здесь это скрипка

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