быстрый вопрос, и я знаю, что это может показаться легким для опытных программистов, но я только учился, и я пытаюсь узнать о лучших практиках и о том, как делать что-то наиболее эффективно, поэтому, пожалуйста, несите меня! Я бы очень признателен за любые советы.Вкладки с JQuery, самый эффективный и эффективный способ?
Я работаю с JQuery, и я пытаюсь сделать простую функциональность Tab. То, как я это сделал, я создал ul, содержащий несколько li, а затем в зависимости от li. Я обновил содержимое в div на странице.
Я реализовал это в JSFiddle, так что вы можете увидеть мой код: http://jsfiddle.net/javacadabra/oeh7Lj62/
Я интересно, если это хороший подход к созданию вкладок? и независимо от того, насколько я показываю тот, на который я нажимаю и скрываю другие, эффективен, потому что скажем, например, у меня было 20 вкладок, мне нужно было бы иметь show() для выбранной вкладки и hide() для других 19? Или есть более эффективный способ для других вкладок? hiding?
Опять же, я знаю, что это довольно простой вопрос, но я просто ищу советы о том, как улучшить. Большое спасибо.
Это мой js
$(document).ready(function() {
$('#mylist li').click(function (e) {
var tab = $(this).html();
if (tab == "one") {
$('#tab-1-list').show();
$('#tab-2-list').hide();
$('#tab-3-list').hide();
}
else if (tab == "two")
{
$('#tab-2-list').show();
$('#tab-1-list').hide();
$('#tab-3-list').hide();
} else {
$('#tab-3-list').show();
$('#tab-1-list').hide();
$('#tab-2-list').hide();
}
});
});
Это мой html
<ul id="mylist">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
<div id="tab-content">
<ul id="tab-1-list">
<li>This is a bullet point for Tab 1</li>
<li>This is a bullet point for Tab 1</li>
<li>This is a bullet point for Tab 1</li>
</ul>
<ul id="tab-2-list">
<li>This is a bullet point for Tab 2</li>
<li>This is a bullet point for Tab 2</li>
<li>This is a bullet point for Tab 2</li>
</ul>
<ul id="tab-3-list">
<li>This is a bullet point for Tab 3</li>
<li>This is a bullet point for Tab 3</li>
<li>This is a bullet point for Tab 3</li>
</ul>
</div>
Это мой css
#tab-1-list{display:none;}
#tab-2-list{display:none;}
#tab-3-list{display:none;}
Спасибо
Я не уверен, что это можно ответить (как «это лучший способ»), поскольку есть много различных способов, чтобы получить это сделано, как вы сделали это, все средства в порядке. Являются ли они более короткими способами. Да, конечно, но ничто не будет драматически влиять на простую вещь, подобную этой. Что касается бита «если там, где есть 20 вкладок», вы можете поместить класс во все содержимое вкладки или просто скрыть всех дочерних элементов родителя, а затем показать нужную вкладку. – Ruddy
Да, я согласен с вами в том, что существует определенно большое количество способов сделать это, я думаю, в прошлом, когда я делал что-то «по-моему», это противоречит лучшей практике, поэтому мне было любопытно, спасибо за вашу помощь. – Javacadabra
@Javacadabra: [здесь] (http://jsfiddle.net/tj_vantoll/nn2Qw/) довольно простая реализация, если это то, что вы ищете – jbutler483