библиотека jQuery выберите вкладки на основе URL-адреса #ИД


Активация jQuery вкладки с URL #идентификатор www.somedomain.com/index.php#tab3

Учитывая это мой лучший выстрел, и он работает, но я чувствую, что это могло быть намного лучше.

Пожалуйста, скажите мне, если это совершенно отвратительно плохо с JS.

$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
    //On Click Event
$("ul.tabs li").click(function (e) {
    e.preventDefault();
    $("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
});
if(document.location.hash!='') {
    //get the index from URL hash
    var tabName = window.location.hash;
    $(tabName).show(); //Show tab from url hash
    var tabNumber = tabName.substr(4,1); //shorten #tab2 to just last digit "2"
    $("ul.tabs li:nth-child(tabNumber)").addClass("active").show();    
} else {

    $("ul.tabs li:first").addClass("active").show(); //Activate first tab
    $(".tab_content:first").show(); //Show first tab content
}

});

Спасибо



22782
2
задан 18 октября 2011 в 06:10 Источник Поделиться
Комментарии
1 ответ

Ну, вы могли бы сделать некоторые рефакторинг этого кода, единственная проблема, которую я вижу заключается в том, что низкая functinality уровень реализуется на верхнем уровне кода. Было бы лучше, чтобы извлечь логики отдельных функций, что-то вроде этого (я также улучшил свой код форматирования немного):

$((function() { // Deleted the "document).ready" part, that is not necessary.
// Hide all content.
$(".tab_content").hide();

// If hash is present in the URL, show tab by hash. Otherwise, show the first tab.
if(document.location.hash!='') {
showTabByHash();
}
else {
showFirstTab()
}

// On the click event of a tab.
$("ul.tabs li").click(function (e) {
e.preventDefault();
showTab($this);
});
});

function showTab(tab) {
// Remove any "active" class.
$("ul.tabs li").removeClass("active");

// Add "active" class to selected tab.
tab.addClass("active");

// Hide all tab content
$(".tab_content").hide();

// Find the href attribute value to identify the active tab + content
var activeTab = tab.find("a").attr("href");

// Fade in the active ID content.
$(activeTab).fadeIn();
}

function showTabByHash() {
// Get the index from URL hash.
var tabName = window.location.hash;
// Shorten #tab2 to just last digit "2".
var tabNumber = tabName.substr(4,1);

// Why are these two lines needed? Don't they work with the same tab element?
$(tabName).show(); //Show tab from url hash
$("ul.tabs li:nth-child(tabNumber)").addClass("active").show();
}

function showFirstTab() {
// Activate first tab.
$("ul.tabs li:first").addClass("active").show();

// Show first tab content.
$(".tab_content:first").show();
}

Я не вижу никаких других проблем с кодом (конечно, это может быть обобщенный немного, но это не ваша цель, если я правильно понял), отдельно от вашего стиля кодирования, который был немного захламлен, на мой взгляд (мне пришлось прочесть ее несколько раз, чтобы полностью понять это).
И если вы работаете в Visual Studio, и эти функции будут использоваться где-то еще, затем добавить XML-комментарии к ним, как правило, хорошая идея.

2
ответ дан 18 октября 2011 в 06:10 Источник Поделиться