JQuery вкладки - загрузить URL в текущей вкладке? - PullRequest
Новая
       15

JQuery вкладки - загрузить URL в текущей вкладке?

0 голосов
/ 23 апреля 2010

Я пытаюсь выяснить, как загрузить URL каждой ссылки на вкладке внутри области вкладок при нажатии, и пытался следить за документами на http://docs.jquery.com/UI/Tabs#...open_links_in_the_current_tab_instead_of_leaving_the_page,, но я явно не понимаю ....

Это HTML-разметка: 

<div class="tabs">
  <ul class="tabNav">
    <li><a href="/1.html#tabone">Tab One</a></li>
    <li><a href="/2.html#tabtwo">Tab Two</a></li>
    <li><a href="/3.html#tabthree">Tab Three</a></li>
  </ul>
</div> 

<div id="tabone"> 
     <!-- Trying to load content from 1.html in this div on click --> 
</div>

<div id="tabtwo"> 
     <!-- Trying to load content from 2.html in this div on click --> 
</div>

<div id="tabthree"> 
     <!-- Trying to load content from 3.html in this div on click --> 
</div>

И это jquery, который я пытаюсь использовать: 

$(".tabs").tabs({
    load: function(event, ui) {
            $('a', ui.panel).click(function() {
                    $(ui.panel).load(this.href);
                    return false;
                });
    }
    });

Я знаю, что у меня есть какая-то часть этого неправильно ... Я прошел несколько итераций (слишком много, чтобы публиковать), и все, что я получаю, это пустой div ... я не знаю Чувствуя себя немного смущенным здесь ... Помощь?

Ответы [ 2 ]

2 голосов
/ 23 апреля 2010

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

Все, что вам действительно нужно, это (вы можете опустить tab контейнер DIVS).Я предполагаю, что другие вкладки являются относительными и представляют полное содержимое вкладки, поэтому я удалил начальный / и хеш. 

<div class="tabs"> 
  <ul class="tabNav"> 
    <li><a href="1.html" title="Tab One">Tab One</a></li> 
    <li><a href="2.html" title="Tab Two">Tab Two</a></li> 
    <li><a href="3.html" title="Tab Three">Tab Three</a></li> 
  </ul> 
</div>

<script type="text/javascript">
    $(function() {  // note wrap in 'ready" function to make sure DOM is loaded
        $('.tabs).tabs();
    });
</script>
0 голосов
/ 07 сентября 2011

И, пожалуйста, убедитесь, что вы добавили следующий код JS и после загрузки вкладок. 

$('#tabs ul li.ui-tabs-selected a').click(function(){
                location.href = $(this).attr('href');
                return false;
        }).css('cursor', 'pointer');

Приветствия !!!

...