JQuery: как связать меню с вкладками - PullRequest
Новая
       6

JQuery: как связать меню с вкладками

0 голосов
/ 15 июля 2010

У меня есть меню и вкладки с кодом, как показано ниже: 

    <div id="menu">
        <ul>
            <li><a href="#"><span>Inspection</span></a></li>
            <ul>
                <li><a href="#"><span>show tabs1</span></a></li>
                <li><a href="#"><span>show tabs2</span></a></li>
            </ul>
        </ul>
    </div>    

    <div id="tabs">
          <ul>
               <li><a href="#tabs1">Inspection Report</a></li>
               <li><a href="#tabs2">Input Data</a></li>
          </ul>
      <div id="tabs1">
           bla bla bla
      </div>
      <div id="tabs2">
           blah blah blah
      </div>
   </div>

Я использовал этот код ниже для выбранных вкладок.но после того, как я нажму show tabs1, на самом деле покажу tabs2: 

<script>
      $(document).ready(function(){
              $("#Tabs").tabs();
              $("#menu ul li a").each(function(index){
                        $(this).click(function(){
                                  $("#Tabs").tabs("select",index);
                                  });
                         });
             });
</script>

Ответы [ 3 ]

2 голосов
/ 24 июля 2010

Теперь, когда вы наконец предоставили достаточно информации, вам легче помочь ...

Отредактируйте ваш javascript следующим образом, он все еще использует метод выбора вкладок jQuery 

$(function() {
    $("#tabs").tabs();
    $("#menu a:not(:first)").each(function(index){
        $(this).click(function() {
            $("#tabs").tabs("select",index);
            return false;
        });
    });
});

Демо: http://jsfiddle.net/LdDGGВ качестве альтернативы, если вы планируете добавить больше элементов a в свои #menu, вы должны добавить идентификаторы либо к элементам a, либо к ul, как в этой демонстрации: http://jsfiddle.net/LdDGG/1/

0 голосов
/ 23 июля 2010

Мы назовем ваше меню «консолью вкладок», а ваш основной контейнер - «панелью вкладок».

Допустим, HTML-код консоли вкладок выглядит примерно так: 

<ul id="tab_console">
    <li id="first"><a href="#">My First Page</a></li>
    <li id="second"><a href="#">My Second Page</a></li>
    <li id="third"><a href="#">My Third Page</a></li>
</ul>

... и вид вашей вкладки выглядит следующим образом: 

<div id="tab_pane">
    <div id="page_first"></div>
    <div id="page_second"></div>
    <div id="page_this"></div>
</div>

Вам необходимо скрыть различное содержимое панели вкладок, чтобы они не отображались сразу.Вы можете сделать это с помощью CSS: 

#tab_pane div {display: none;}

Теперь нам нужен скрипт, чтобы все это работало: 

$(document).ready(function(){                    // fires when browser loads your html
    $('#tab_console > li').click(function() {    // fires when a tab is clicked
        $('#tab_pane > div').hide();             // hides all tab contents
        $('#tab_pane > #page_' + $(this).attr('id')).show();   // show the selected tab
    });

    $('#tab_pane > li#page_first').show();     // load your default tab
});
0 голосов
/ 16 июля 2010

Ваш вопрос не очень понятен, но, возможно, вам нужен метод select. Это делает следующее:

Выберите вкладку, как если бы она была нажата. Второй аргумент - основанный на нуле индекс выбранной вкладки или Идентификатор панели выбора вкладки связано с (вкладка HREF идентификатор фрагмента, например хэш, баллы к идентификатору панели).

Также из документации :

[Как мне] ... выбрать вкладку из текстовой ссылки вместо того, чтобы нажимать на вкладку 

var $tabs = $('#example').tabs(); // first tab selected

$('#my-text-link').click(function() { // bind click event to link
        $tabs.tabs('select', 2); // switch to third tab
        return false;
});

Вот демонстрация того, как это работает: http://jsfiddle.net/hP9xb/

...