Вкладки jQueryUI - глубокие ссылки на содержимое вкладок

Question

Я не уверен, возможно ли это в данный момент, и проведенное тестирование дает странные результаты.

На одной странице есть раздел из 4 вкладок, внутри этих вкладок есть несколько разделов текста, каждому из которых я присвоил уникальное имя привязки.

Я пытаюсь сделать ссылку с другой страницы, чтобы сказать 4-й блок контента на вкладке 3 ...

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

Я пытался

<a href="http://example.com#tab-3#content-4" ></a>

но это вообще не работает

и когда я использую

<a href="http://example.com#tab-3"></a>

Я также видел, как это реализовано - однако, похоже, он обладает той же функциональностью, что и простой код, описанный выше, независимо от того, присутствует ли он в моем вызове jquery

$(function(){
  $('tabs').tabs();
  var hash = location.hash;
  $('tabs').tabs( "select" , hash );
});

При любом из двух указанных выше вариантов, когда выбрана третья вкладка, я перемещаюсь до самого конца страницы. Я предполагаю, что это потому, что все вкладки размещаются в элементах списка, а затем jqueryui превращает их в вкладки ... фактически перемещая содержимое вкладок для номера 3 снизу вверх до верхней части раздела вкладок.

если кто-нибудь знает, как я могу ссылаться на 4-й блок контента на 3-й вкладке, я был бы очень рад.

кто-то, решение может лежать в данных $ _post и $ _get ... но я не уверен, так ли это на самом деле, и даже тогда я не уверен, как реализовать это с помощью jqueryui

Заранее спасибо

Answer 1

Попробуйте это:

В качестве ссылки используйте

<a href="http://example.com#content-4" ></a>

И сценарий

    $(function(){
        $tabs = $('#tabs').tabs();

        var hash = location.hash.substring(1),

        $anchor = $tabs
            .find('a[name="' + hash + '"]'),

        tabId = $anchor.closest('.ui-tabs-panel')
            .attr('id');

        $tabs.find('ul:first a').each(
            function(i){
                    if($(this).attr('href') === '#' + tabId){
                        $tabs.tabs('select', i);
                        window.scrollTo(0, $anchor.position().top);
                        // Stop searching if we found it
                        return false;
                    }
            }
        );
    });

Answer 2

В зависимости от того, какой язык сценариев на стороне сервера вы используете, если таковой имеется, вы можете передать нужную вкладку в URL, $_GET[] ее, а затем отобразить ее в качестве опции selected при вызовеtabs(); виджет.Затем, используя отличную функцию, которую я нашел в другом потоке стека, вы можете получить координаты выбранного элемента и перейти к нему.

, например, используя PHP

<!--- link on another page -->
<a href="yourtabspage.php?tab=2&ctntid=content4">Your Link to Fourth Piece of Content in Second Tab</a>

Затем на странице вкладок:

<?php 
  $your_tab = $_GET['tab']; 
  $your_selected_element = $_GET['ctntid'];
?>

<script type="text/javascript">

// this function is from another post on stackoverflow, I didn't write it.

function getOffset( el ) {
  var _x = 0;
  var _y = 0;
  while( el && !isNaN( el.offsetLeft ) && !isNaN( el.offsetTop ) ) {
    _x += el.offsetLeft - el.scrollLeft;
    _y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }
  return { top: _y, left: _x };
}

jQuery(document).ready(function () {
  $("#tabs").tabs({
    selected: "<?php echo $your_tab; ?>"
  });


});

jQuery(window).load(function() {
  var x = getOffset( document.getElementById('<?php echo $your_selected_element;?>') ).left;
  var y = getOffset( document.getElementById('<?php echo $your_selected_element;?>') ).top;
  window.scrollTo(x,y)
});

</script>

Answer 3

Старый вопрос, но я натолкнулся на эту нужную мне вкладку с глубокими ссылками. Я также должен был сохранить хэш на постбеках. Ниже дается глубокая ссылка на вкладки jQuery И сохраняйте хеш при обратной передаче, добавляя хеш к действию формы.

    $(document).ready(function ($) {

        //Initialize the jQuery tabs
        $("#tabs").tabs({
            activate: function (event, ui) {
                //Add this ID to the URL, and scroll back to the top
                location.hash = ui.newPanel.attr('id');
                window.scrollTo(0, 0);

                //Update the form to append the hash to the action, for post-backs
                var newAction = $("#frmMain").attr("action").split('#')[0] + location.hash;
                $("#frmMain").attr("action", newAction);
            }
        });

        //When the page loads, if we have a hash, load that tab
        var hash = location.hash;
        if (hash.length > 0) {
            //Load the tab associated with this hash
            $("#tabs").tabs("load", hash);

            //Re-update the form to append the hash to the action, for post-backs
            var newAction = $("#frmMain").attr("action").split('#')[0] + hash;
            $("#frmMain").attr("action", newAction);
        }

    });

Answer 4

попробуй

<a href="#" onclick="changetab(3)">Tab 4</a>


function changetab(idx)
{
  $('tabs').tabs( "select" , idx);
}