Jquery, как нажать 2 кнопки в одной функции?Помощь, Bootstrap включен

Question

У меня есть такой код верхней панели страницы (navbar):

<div class="navbar-collapse collapse" id="navbar10">
            <ul class="navbar-nav nav-fill w-100">
                <li class="nav-item">
                    <a class="nav-link" href="#">Homepage</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="#button1">First Button</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="#button2">Second Button</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="#button3">Third Button</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="#button4">4th Button</a>
                </li>
                 <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>

И много строк, у меня есть код для кнопок галереи.Каждая кнопка отображает фотографии разных типов.

        <div class="gallery-menu text-center row">
            <div class="col-md-12">
                <div class="button-group filter-button-group">
                <div class="flex-container">
                    <button data-filter=".photo_b" id="button1">First Gallery</button>
                    <button data-filter=".photo_d" id="button2">Second Gallery</button>
                    <button data-filter=".photo_c" id="button3">Third Gallery</button>
                    <button data-filter=".photo_a" id="button4">4th Gallery</button>
                    <button class="active" data-filter="*" id="button5">All photos</button>
                </div>
                </div>
            </div>
        </div>

Благодаря этому коду, когда я нажимаю на главную панель в «Первой кнопке», благодаря «# button1» мы спускаемся в «Первую галерею»раздел, но ничего не происходит.Мне бы хотелось, чтобы он работал так, чтобы при одновременном нажатии на «Первая кнопка» вы нажимали «Первая галерея»

Я пробовал много способов, например:

    $( "#button1" ).click(function() {
$( this ).addClass('active');
});

Но это не работает.Вы можете делать это как угодно, это не должно быть jquery, если это работает, потому что я сдался ... Я прошу помощи, спасибо и с наилучшими пожеланиями!

Answer 1

Если я вас правильно понял, вы должны выбрать все a теги, у которых их href атрибут начинается с #button, а затем внутри их click слушателя вы должны использовать их href Значения в качестве желаемого идентификатора кнопки для запуска функции кнопок click. Вот фрагмент кода этого подхода:

$("button").click(function(){
console.log($(this).html());
});




/////////////////////////////////////////////
//    The code you are looking for
/////////////////////////////////////////////


$("a[href^='#button']").click(function(e) {
let btnID = $(this).attr("href");
console.log("link clicked => " + btnID);
setTimeout(()=>$(btnID).click() , 100);
});

.space{
height:350px
}
.space2{
height:50px
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="navbar-collapse collapse" id="navbar10">
            <ul class="navbar-nav nav-fill w-100">
                <li class="nav-item">
                    <a class="nav-link" href="#">Homepage</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="#button1">First Button</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="#button2">Second Button</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="#button3">Third Button</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link active" href="#button4">4th Button</a>
                </li>
                 <li class="nav-item">
                    <a class="nav-link" href="#">Contact</a>
                </li>
            </ul>
        </div>
        
        <div class="space"></div>
        
        
          <div class="gallery-menu text-center row">
            <div class="col-md-12">
                <div class="button-group filter-button-group">
                <div class="flex-container">
                    <button data-filter=".photo_b" id="button1">First Gallery</button>
                    <button data-filter=".photo_d" id="button2">Second Gallery</button>
                    <button data-filter=".photo_c" id="button3">Third Gallery</button>
                    <button data-filter=".photo_a" id="button4">4th Gallery</button>
                    <button class="active" data-filter="*" id="button5">All photos</button>
                </div>
                </div>
            </div>
        </div>
        
        <div class="space2">

Answer 2

**try it should be work....**    
<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>

            <div class="navbar-collapse collapse" id="navbar10">
                <ul class="navbar-nav nav-fill w-100">
                    <li class="nav-item">
                        <a class="nav-link" href="#">Homepage</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#button1">First Button</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#button2">Second Button</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#button3">Third Button</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="#button4">4th Button</a>
                    </li>
                     <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>


        <div class="gallery-menu text-center row">
                <div class="col-md-12">
                    <div class="button-group filter-button-group">
                    <div class="flex-container">
                        <button data-filter=".photo_b" id="button1">First Gallery</button>
                        <button data-filter=".photo_d" id="button2">Second Gallery</button>
                        <button data-filter=".photo_c" id="button3">Third Gallery</button>
                        <button data-filter=".photo_a" id="button4">4th Gallery</button>
                        <button class="active" data-filter="*" id="button5">All photos</button>
                    </div>
                    </div>
                </div>
            </div>


        <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </body>
    </html>

// вот ваш код скрипта ...

<script type="text/javascript">
        $('ul li a').click(function(){
            var gallery_id = $(this).attr('href');
            if(gallery_id != "#"){
                $(gallery_id).click();  
            }
        })

        $("#button1").on('click', function(){
                console.log('clicked button1');
        })

        $("#button2").on('click', function(){
                console.log('clicked button2');
        })

        $("#button3").on('click', function(){
                console.log('clicked button3');
        })

        $("#button4").on('click', function(){
                console.log('clicked button4');
        })

        $("#button5").on('click', function(){
                console.log('clicked button5');
        })
    </script>

Answer 3

Editted:

$("a[href='#button1']").click(function(e) {
    $($(this).attr("href")).click();
});