jQuery: вкладки с URL-адресом без "перехода на страницу"

ProgramBox

jQuery: вкладки с URL-адресом без «перехода на страницу»

Post author:admin
Запись опубликована:29 мая, 2023
Post category:Вопросы по программированию

#jquery

Вопрос:

У меня есть набор вкладок, и мне нужно, чтобы URL-адрес каждой вкладки отображал правильную / активную вкладку, если кто-то вставит ее в адресную строку.

Скрипт:

 $(function() { 
    $('.tabs span').click(function(){
        switch_tabs($(this));
        return false;
    }); 
    switch_tabs($('.defaulttab'));
});

function switch_tabs(obj) {
    $('.tab-content').hide();
    $('.tabs span').removeClass("selected");
    var id = obj.attr("rel");
    $('#' id).show();
    obj.addClass("selected");
}

HTML:

 <ul class="tabs">
    <li><a href="#a"><span rel="a" class="defaulttab">A</span></a></li>
    <li><a href="#b"><span rel="b">B</span></a></li>
    <li><a href="#c"><span rel="c">C</span></a></li>
    <li><a href="#d"><span rel="d">D</span></a></li>
    <li><a href="#e"><span rel="e">E</span></a></li>
</ul>
<div class="tab-content" id="a">content</div>
<div class="tab-content" id="b">content</div>
<div class="tab-content" id="c">content</div>
<div class="tab-content" id="d">content</div>
<div class="tab-content" id="e">content</div>

Так что, если кто-то вставит «http://www.domain.com/aboutus/page#c» например, в их браузере браузер переходит на эту страницу, и вкладка C активна, но страница не переходит вниз.

Имеет ли это смысл?

Большое спасибо за любую помощь в этом.

Ответ №1:

Этого не избежать, но вы можете обойти это, прокрутив страницу назад к началу с помощью window.scrollTo :

 setTimeout(function() {
  if(location.hash) {
    window.scrollTo(0, 0);
  }
}, 1);

1. Необходимо изменить, действительно ли на странице, на которую я хочу перейти, есть привязка.

2. @simshaun — Я думал, что OP хочет быть в верхней части страницы.

3. Если вкладки являются единственными якорями на странице, тогда все в порядке. Я просто говорю, что если на странице есть другие привязки, то скрипт необходимо изменить, чтобы он прокручивался наверх только в том случае, если привязка указывает на одну из вкладок.

4. Интересно, сохраню это в своем списке. Спасибо!

Ответ №2:

Я не уверен, что вы можете это изменить. AFAIK, браузер выполняет переход до того, как JavaScript может его остановить. Хотя, наверное, я могу ошибаться.

В качестве альтернативы вы могли бы предоставить URL-адреса с несуществующим именем привязки (например, «http://www.domain.com/aboutus/page#tab_c «). JavaScript удалит часть tab_, а затем отобразит соответствующую вкладку.

1. Javascript может остановить переход, e.preventDefault(); где e это сделает объект события щелчка

2. Да, вы можете сделать это при нажатии на ссылку, но он говорит о том, если кто-то вставит URL domain.com/page#c в браузере.

3. Мне нужно предоставить полный URL-адрес, но я могу смириться с переходом страницы на вкладку. Спасибо.

Ответ №3:

Я сделал это здесь с помощью своего javascript: http://www.starcraft-source.com/tv/#stream-2

     //assuming `#tab1` is your hash, `tab1` will be shown
    if (parent.location.hash.length > 0) {
          showTab(parent.location.hash);
    }

Для этого также потребуется связать ваши вкладки, например href="tab1"

Вот как я это использую…

 Spire.Tv = function () {
    return {
        init: function () {
            if (parent.location.hash.length > 0) {
                this.loadStream(parent.location.hash.split('-')[1]);
            }

            $('.stream').bind('click', function (e) {
                Spire.Tv.loadStream($(e.currentTarget).attr('id'));
            });

            $('#rightbar-full a.stream').bind('click', function (e) {
                Spire.Tv.loadStream($(e.currentTarget).attr('id'));
            });
        },
        loadStream: function (id) {
            $.ajax({
                type: 'post',
                url: webRoot   "/lib/ajax/site/tv/getStream.php",
                data: {
                    id: id
                },
                dataType: 'json',
                success: function (data) {
                    $('#screen').html(data.screen);
                    parent.location.hash = 'stream-' data.id;
                }
            });
        }
    }
}();

Обратите внимание, как я управляю хэшем на странице с помощью: parent.location.hash = 'stream-' data.id;

1. Да, я вижу, что это работает на вашем веб-сайте, но ваш код сжат, поэтому его невозможно понять для меня, я очень новичок в этом. Есть идеи, куда в моем коде мне следует поместить это if? Спасибо.

2. Ваш ответ наиболее близок к моему решению, но он не решает мою проблему полностью, поскольку ваша реализация сильно отличается от моей. Тем не менее, я дал вам право голоса. Спасибо.

3. Можете ли вы обновить свой первоначальный пост самым последним кодом и что еще нужно сделать?

Ответ №4:

Попробуйте добавить имя для привязки:

http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_link_bookmark

 Something like <a name="C4">Chapter 4</a>

На основе вашего кода:

 <li><a href="#c" name="c"><span rel="c">C</span></a></li>