Элегантный javascript для скрытия и отображения divs

Мой javascript является самым слабым из моих интерфейсных веб-знаний, и я предполагаю, что это гораздо более эффективный способ достичь моей функциональности, чем то, как я это сделал.Элегантный javascript для скрытия и отображения divs

В принципе, у меня есть сайт, на котором у вас есть <li> элементов, и при нажатии они показывают конкретный div, и если другой div (связанный с другим элементом <li>) в настоящее время виден, он скрывает его и отображает соответствующий div. Он также назначает класс active для элемента <li>, чтобы предоставить другой цветной значок для активного раздела (стандартная практика UX).

Вот моя функция HTML и Javascript.

<li id="general">General</li> 
    <li id="blog">Blog</li> 
    <li id="twitter">Twitter</li>

И Javascript (это больно, просто глядя на него)

$(document).ready(function() { 

$("#general").addClass("active"); 

$("#general").click(function() { 
    $(".data-tab").hide(); 
    $(".settings-general").toggle(); 
    $("li").removeClass("active"); 
    $("#general").addClass("active"); 
}); 

$(".settings-twitter").hide(); 

$("#twitter").click(function() { 
    $(".data-tab").hide(); 
    $(".settings-twitter").toggle(); 
    $("li").removeClass("active");  
    $("#twitter").addClass("active"); 
}); 

$(".settings-blog").hide(); 

$("#blog").click(function() { 
    $(".data-tab").hide(); 
    $(".settings-blog").toggle(); 
    $("li").removeClass("active");  
    $("#blog").addClass("active"); 
}) 

});

Не поймите меня неправильно, это хорошо работает! Но это выглядит утомительно, и, вероятно, намного быстрее, чем может добиться JQuery. Любой совет для начинающего JS?

источник

2014-10-16 WebDevDanno

Этот вопрос не соответствует теме, потому что он лучше подходит для http://codereview.stackexchange.com/. – Andy

Можете ли вы опубликовать скрипку? или остальной части вашего html? Полная структура вашего кода поможет – jmore009

Просто создайте одну функцию для выполнения одной и той же вещи дважды, или вы можете просто пропустить код для каждого, который вы хотите настроить.

function setUp(name){ 
    $(".settings-"+name).hide(); 

    $("#"+name).click(function() { 
     $(".data-tab").hide(); 
     $(".settings-"+name).toggle(); 
     $("li").removeClass("active");  
     $(this).addClass("active"); 
    }); 
} 

setUp('blog'); 
setUp('twitter');

источник

2014-10-16 15:30:51 EvilZebra

Это замечательно. Я добавил код 'setUp ('general')', чтобы назначить функциональность метода общим настройкам div, а затем добавил '$ ('settings-general'). Show();' чтобы показать общие настройки по умолчанию , Я буду принимать ответ, как только время истекло! :) – WebDevDanno

С помощью jQuery вы обычно пытаетесь избежать повторных вызовов. Если вы реструктурируете, используя атрибуты 'data-', вам не нужно менять код для любого количества элементов (добавляется альтернативный ответ). –

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

<style> 
    div.tab { display: none } 

    body.general li.general { font-weight: bold; } 
    body.general div.tab.general { display: block; } 

    body.blog li.blog { font-weight: bold; } 
    body.blog div.tab.blog { display: block; } 

    body.twitter li.twitter { font-weight: bold; } 
    body.twitter div.tab.twitter { display: block; } 
</style> 

<body> 
    <ul> 
     <li class="general">General</li> 
     <li class="blog">Blog</li> 
     <li class="twitter">Twitter</li> 
    </ul> 

    <div class="general tab">general tab</div> 
    <div class="blog tab">blog tab</div> 
    <div class="twitter tab">twitter tab</div> 

    <script> 
     $('li').click(function() { 
      $('body').attr('class', $(this).attr('class')); 
     }); 
    </script> 
</body>

См http://jsfiddle.net/szzdyp1n/ для рабочего примера.

источник

2014-10-16 15:35:07 rjmunro

'' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' '' Я переведу их. – rjmunro

Лучше теперь с вашими изменениями и действительно работает, но при замене всех классов на 'body' still * пахнет неправильно *. Вы ставите логическую проблему, чтобы стать проблемой стиля. Возможно, это просто мое глубокое отвращение к стандарту CSS, но это кажется сложнее поддерживать и будет работать только для одного плагина за раз (поскольку он уничтожает все классы на 'body'). –

@TrueBlueAussie: На практике я бы не сделал этого на теле, я бы сделал это на ближайшем контейнере. Он страдает от того, что стиль, ужасный для поддержания, не подходит, если будет много записей. – rjmunro

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

http://jsfiddle.net/TrueBlueAussie/8hvofd6m/2/

$(document).ready(function() { 
    $(".menu:first").addClass("active"); 
    $('.settings-general').show(); 
    $(".menu").click(function() { 

     var $active = $(this); 

     // Unhilight the inactive items 
     $(".menu").not($active).removeClass("active"); 

     // Then highlight just the active item 
     $active.addClass("active"); 

     // Seek the target using a jQuery selector in the data-setting attribute 
     var $setting = $($active.data('setting')); 

     // Hide the others 
     $('.settings').not($setting).hide(); 

     // Show the selected one 
     $setting.show(); 
    }); 
});

В data-setting атрибуты могут быть любой селектор, класс, идентификатор или сложным. так что вы можете делать классные вещи вроде:

<li class="menu" data-setting="#info .subinfo:first">First info</li>

источник

2014-10-16 15:38:05

Элегантный javascript для скрытия и отображения divs

ответ

Смежные вопросы