Переключение DIV на странице с помощью jQuery

Question

У меня есть ряд ссылок в верхней части моей страницы, которые предназначены для использования в качестве вкладок, при нажатии одной из которых я хочу, чтобы его DIV показывался, а остальные скрывались. Я действительно не уверен, что лучший способ сделать это.

То, что я изначально придумал:

$("#overall").click(function(){
    if ($("#overall").is(":hidden"))
    {
        $("#hourly-div").hide("fast");
        $("#daily-div").hide("fast");
        $("#monthly-div").hide("fast");
        $("#overall-div").show("fast");
    }
});

Но я обнаружил, что это не работает вообще. Должен ли я проверить, является ли CSS для DIV display: hidden;?

Поднимите отметку ниже.

    <ul class="stats">
        <li><a href="#" id="overall">Overall stats</a></li>
        <li class="sep">|</li>
        <li><a href="#" id="hourly">Hourly Bandwidth</a></li>
        <li class="sep">|</li>
        <li><a href="#" id="daily">Daily Bandwidth</a></li>
        <li class="sep">|</li>
        <li><a href="#" id="monthly">Monthly Bandwidth</a></li>
    </ul>
    <div id="overall-div">
        overall
    </div>
    <div id="hourly-div" style="display: none;">
        hourly
    </div>
    <div id="daily-div" style="display: none;">
        daily
    </div>
    <div id="monthly-div" style="display: none;">
        monthly
    </div>

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

Спасибо. :)

Answer 1

Лучший способ сделать это - использовать jQuery UI и плагин tabs . Если вы должны реализовать интерфейс с вкладками самостоятельно, по крайней мере, посмотрите на их код, чтобы понять, как это сделать. Обратите внимание, что вам не нужно загружать весь код пользовательского интерфейса, чтобы использовать только вкладки. Вы можете уменьшить загрузку, ограничив ее только теми компонентами, которые вам нужны.

<div class="tabs">
    <ul class="stats">
            <li><a href="#overall-div" id="overall">Overall stats</a></li>
            <li><a href="#hourly-div" id="hourly">Hourly Bandwidth</a></li>
            <li><a href="#daily-div" id="daily">Daily Bandwidth</a></li>
            <li><a href="#monthly-div" id="monthly">Monthly Bandwidth</a></li>
    </ul>
    <div id="overall-div">
            overall
    </div>
    <div id="hourly-div">
            hourly
    </div>
    <div id="daily-div">
            daily
    </div>
    <div id="monthly-div">
            monthly
    </div>
</div>

<script type="text/javascript">
    $(function() {
        $('.tabs').tabs();  // that's it unless you want to customize
    });
</script>

Приятным дополнительным бонусом является то, что он отлично работает, если у пользователя отключен JavaScript.

Answer 2

Вот как я это сделал, добавьте это к событию клика:

if(jQuery){
  jQuery('.tab').removeClass('show');
  jQuery('#skills').addClass('show');
  return false;
};

и css:

div.tab {display:none;}
div.show {display:block;}

Answer 3

Что-то вроде:

$('ul.stats a').click(function(e) {
    $('#' + this.id + '-div').show().siblings('[id$=-div]').hide();
    e.preventDefault();
});