Как объединить два слова, в которых есть пробел, в элемент jquery?

Question

В приведенном ниже коде показаны три ссылки, по которым нужно щелкнуть, где каждая ссылка должна быть перенаправлена ​​на div.

<div class="paging-links">
    <nav>
        <ul>
            <li class="paging-item"><a href="#" class="paging-link active">First Div</a></li>
            <li class="paging-item"><a href="#" class="paging-link">Second Div</a></li>
            <li class="paging-item"><a href="#" class="paging-link">Third Div</a></li>
        </ul>
    </nav>
</div>

В First Div есть несколько изображений, которые отображаются при загрузке страницы

<div id="gallery-page-first div" class="gallery-page">
...... image set......

Second Div имеет несколько изображений, которые необходимо отображать при нажатии на ссылку «Second Div»

<div id="gallery-page-second div" class="gallery-page hidden">
...... image set......

В третьем Div есть несколько изображений, которые необходимо отобразить при нажатии на ссылку «Third Div» и наоборотнаоборот для второго и первого.

<div id="gallery-page-third div" class="gallery-page hidden">
...... image set......

Мой вопрос как получить элементы Div с пробелом для объединения в нижеследующий JQuery ?. (отмечено с помощью <---)

<script>
    $(document).ready(function(){
        // Handle click on paging links
        $('.paging-link').click(function(e){
            e.preventDefault();

            var page = $(this).text().toLowerCase();
            $('.gallery-page').addClass('hidden');
            $('#gallery-page-' + page).removeClass('hidden'); // <---
            $('.paging-link').removeClass('active');
            $(this).addClass("active");
        });
    });
</script>

Редактировать: Тем не менее, я использую _ символ между словами, что-то вроде

<li class="paging-item"><a href="#" class="paging-link active">First_Div</a></li> 

и

<div id="gallery-page-first_div" class="gallery-page">
...... image set......

Ссылки отлично работают, но это выглядит не очень хорошо.

Answer 1

Поместите идентификатор DIV в атрибут href вместо использования текста.

<div class="paging-links">
    <nav>
        <ul>
            <li class="paging-item"><a href="#div1" class="paging-link active">First Div</a></li>
            <li class="paging-item"><a href="#div2" class="paging-link">Second Div</a></li>
            <li class="paging-item"><a href="#div3" class="paging-link">Third Div</a></li>
        </ul>
    </nav>
</div>

<div id="div1" class="gallery-page">
...... image set......
</div>
<div id="div2" class="gallery-page hidden">
...... image set......
</div>
<div id="div3" class="gallery-page hidden">
...... image set......
</div>

Тогда код jQuery:

$(document).ready(function(){
    // Handle click on paging links
    $('.paging-link').click(function(e){
        e.preventDefault();

        var page = $(this).attr('href');
        $('.gallery-page').addClass('hidden');
        $(page).removeClass('hidden'); // <---
        $('.paging-link').removeClass('active');
        $(this).addClass("active");
    });
});

Answer 2

Вы можете решить эту проблему разными способами,

Вы можете использовать атрибуты данных jquery. Здесь я добавил список данных в списке li

<div class="paging-links">
    <nav>
        <ul>
            <li class="paging-item" data-list="first"><a href="#div1"  class="paging-link active">First Div</a></li>
            <li class="paging-item" data-list="second"><a href="#div2" class="paging-link">Second Div</a></li>
            <li class="paging-item" data-list="third"><a href="#div3" class="paging-link">Third Div</a></li>
        </ul>
    </nav>
</div>

Категория Div

<div id="gallery-page-first div" class="gallery-page">
...... image set......
<div id="gallery-page-second div" class="gallery-page">
...... image set......
<div id="gallery-page-third div" class="gallery-page">
...... image set......

Скрипт

<script>
           $(document).ready(function(){
        // Handle click on paging links
            $('.paging-link').click(function(e){
                e.preventDefault();
                var page = $(this).data('list');
                $('.gallery-page').addClass('hidden');
                $('#gallery-page-' + page).removeClass('hidden'); // <---
                $('.paging-link').removeClass('active');
                $(this).addClass("active");
            });
        });
        </script>

Answer 3

Если я правильно понимаю, у вас проблемы с чем-то вроде аккордеона. Вы можете использовать этот фрагмент. Проверьте это один раз.

$(".tab-btn li").click(function () {
//alert('ss')
  var e = $(".tab-btn li").index(this);
  $(".tab-btn li").removeClass("active"),
  $(this).addClass("active"),
  $(".tabs").fadeOut(600).hide(),
  $(".tabs:eq(" + e + ")").fadeIn(600).show()
});

.tabs{display:none}
.tabs.active{display:block}
.tab-btn li.active{color: red}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<ul class="tab-btn">
  <li class="active">Tab 1</li>
  <li>Tab 2</li>
  <li>Tab 3</li>
</ul>

<div class="tabs active">
  <p>Something >> 1</p>
</div>
<div class="tabs">
  <p>Something >> 2</p>
</div>
<div class="tabs">
  <p>Something >> 3</p>
</div>