включить отключить вкладку jquery

У меня есть контейнер вкладок jquery, в котором есть две вкладки. Теперь я хочу, чтобы изначально вторая вкладка была отключена. При нажатии кнопки на первой вкладке вторая вкладка будет активирована и открыта автоматически.

<script type="text/javascript">
    $(document).ready(function() {
    //When page loads...
    $(".tab_content").hide(); //Hide all content
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content
    //On Click Event
    $("ul.tabs li").click(function() {
        $("ul.tabs li").removeClass("active"); //Remove any "active" class
            $(this).addClass("active"); //Add "active" class to selected tab
            $(".tab_content").hide(); //Hide all tab content
            var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to identify the active tab + content
            $(activeTab).fadeIn(); //Fade in the active ID content
            return false;
        });

      });
</script>

<div class="tab-wrapper" id="tab-wrapper">
    <div class="tab-header">
        <ul class="tabs">
                <li><a href="#tab1">overview</a></li>
                <li><a href="#tab2">details</a></li>
            </ul>
    </div>
    <div class="tab_container">
            <div id="tab1" class="tab_content">
                here is the list of the overview
        </div>
            <div id="tab2" class="tab_content">
                Particular Details
            </div>
        </div>
</div>

jquery tabs jquery-tabs
person Krisanu    schedule 14.04.2011    source источник

Ответы (4)


arrow_upward
0
arrow_downward

Я бы решил это с помощью переменной, которая отслеживает, была ли нажата кнопка, установив для нее значение «false» по умолчанию и «true» при нажатии кнопки.

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

Вот рабочий пример: http://jsbin.com/ijoco5.

person amustill    schedule 14.04.2011
comment
Именно это требование. Но я не использовал вкладку jquery по умолчанию, в моем случае tabLinks.eq(0) или tabLinks.eq(1) не работает. Итак, как мне выбрать вторую вкладку? - person Krisanu; 14.04.2011
comment
Нет никаких функций вкладок jQuery по умолчанию, если только вы не использовали вкладки пользовательского интерфейса jQuery, но иногда это излишне. «TabLinks» — это просто установленная мной переменная, содержащая элементы из селектора $('#tabs a'), так что мне не нужно повторно вызывать этот селектор. Способ кэширования, если хотите. '.eq()' — это еще один способ фильтрации элементов, аналогичный ':first', начиная с 0, означающего первый элемент (api.jquery.com/eq). Я изменил пример, чтобы использовать вашу разметку, так что, возможно, он имеет немного больше смысла: jsbin.com/ijoco5 /2 - person amustill; 14.04.2011

arrow_upward
5
arrow_downward

Вы можете использовать следующие

$("#tabs").tabs({disabled: [0,1]});

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

$("#tabs").tabs({disabled: false });

Для настройки выбранной вкладки вы можете использовать этот пример из вкладок jQuery:

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

$('#my-text-link').click(function() { // bind click event to link
    $tabs.tabs('select', 2); // switch to third tab
    return false;
});
person Gaʀʀʏ    schedule 09.10.2012
comment
Чтобы отключение вступило в силу, убедитесь, что эта вкладка не выбрана на предыдущем экране. Мне пришлось отменить выбор вкладки, которую я собирался отключить, чтобы отобразить ее правильно (если вкладка была активной (выбранной), она все равно будет отображаться, даже если программно отключена `$( #tabs ).tabs( option, selected, 0 ) ; $(#tabs).tabs({disabled: [1]});` - person Carlos Garcia; 29.04.2013
comment
Спасибо за Ваш ответ. - person Zaker; 27.04.2015

arrow_upward
2
arrow_downward

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

Во-первых: jQuerys tabs('disable') просто не работает. Поэтому я создал свою собственную функцию, чтобы отключить их все. Вот это:

function disableTabs(obj){
    var c = obj.find("ul li").size();
    for(var i=0;i<c;i++){
        obj.tabs("disable", i);
    }
}

Вы можете использовать его так: disableTabs($('#myTabs')). jQuery не позволяет вам отключить текущую вкладку, и, поскольку это происходит при загрузке страницы, она будет первой. Затем вам нужно будет создать некоторые переменные для хранения некоторых данных...

var openTab = 0;
var currTab = 0;

Затем пара функций, чтобы справиться с этим...

function enableTab(obj, num){
    obj.tabs("enable", num);
}
function next(){
    openTab++;
    currTab++;
    enableTab($(".tabs"), currTab);
    $(".tabs").tabs("select", currTab);
}
function prev(){
    openTab--;
    currTab--;
    $(".tabs").tabs("select", currTab);
}

Затем мы просто присоединяем несколько обработчиков событий:

$('#myTab').bind('tabsshow', function(event, ui) {
    currTab = ui.index;
});
$(".next").click(function(){
    next();
});
$(".prev").click(function(){
    prev();
});

HTML для этих кнопок очень прост:

<a class='prev'>Previous</a>
<a class='next'>Next</a>

Надеюсь, что это помогает и удачи!

Кстати: у меня есть несколько полноценных рабочих вкладок здесь, на которые вы, возможно, захотите взглянуть.

person Tanner Ottinger    schedule 14.04.2011

arrow_upward
0
arrow_downward

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

$('.tabs > #tab2').trigger('click');

И дайте id li > a : <a id="tab1" href="#tab1"></a>

person Dharmesh    schedule 14.04.2011