Вопрос по css, jquery, html – Onclick Показать / скрыть несколько DivS JQuery

2

Мне нужно создать навигацию, которая показывает / скрывает несколько div.

Here is what I need to be able to do: Если пользователь нажимает на любую из кнопок & quot;options& Quot; Мне нужен класс с именем & quot;selected& Quot; связанный с текущим выбранным или выбранным элементом в навигационной панели - это означает добавление класса к якору. Вы увидите, что есть CSS-стиль для класса «выбранный» в моем примере ниже.

Посмотреть текущий прогресс

У меня также возникают проблемы при попытке использовать любой из "вариантов 1" или "вариант 2" уже выбрана загрузка, так что все div не отображаются - Onload Мне нужен только один div с правильным & quot;option& Quot; & Quot;selected& Quot; если это имеет смысл.

Все предложения приветствуются!

Ваш Ответ

5   ответов
1

EDIT: для решения не JQuery попробуйте это:

     var field = document.getElementById(element); 
     if (element) { 
          if (field.style.display == 'none') { 
                field.style.display = 'block'; 
          } else { 
                field.style.display = 'none'; 
          } 
     } 
}

Это был бы ваш код, чтобы показать и спрятать в вашем JS

<div class="buttons">
    <button class="showSingle" target="1" onClick="showHide(div1);">Option 1</button>
    <button class="showSingle" target="2" onClick="showHide(div2);">Option 2</button>
    <button class="showSingle" target="3" onClick="showHide(div3);">Option 3</button>
    <button class="showSingle" target="4" onClick="showHide(div4);">Option 4</button>
</div>

<div id="div1" class="targetDiv" style="display:none">Lorum Ipsum 1</div>
<div id="div2" class="targetDiv" style="display:none">Lorum Ipsum 2</div>
<div id="div3" class="targetDiv" style="display:none">Lorum Ipsum 3</div>
<div id="div4" class="targetDiv" style="display:none">Lorum Ipsum 4</div>​

Это должно начать вас :-)

Полностью пропустил Jquery мой плохой

1

бытие клика:

    $(".buttons .selected").removeClass("selected");
    $(this).addClass("selected"); 

Или, как говорит Иррелепант (на самом деле лучше):

$(this).addClass('selected').siblings().removeClass('selected');
3

target это действительно не так. Я изменил это наdata-target и сделал:

$('.showSingle').on('click', function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    $('.targetDiv').hide();
    $('#div' + $(this).data('target')).show();
});​

FIDDLE

on() будет работать только в jQuery 1.7+, поэтому, если вы используете старую версию jQuery (ваша скрипка есть), придерживайтесьclick().

@dinjas - Спасибо, кажется, я забыл сохранить скрипку и только что опубликовал скрипку ОП (смущенно)?
Вот пример предлагаемого подхода, а также щелчок по первому элементу, чтобы начать работу:jsfiddle.net/XwN2L/420
1

http://jsfiddle.net/XwN2L/415/ , Он удаляет класс «выбранный» из всех.showSingle привязывает, затем добавляет класс «выбранный» на кликнул якорь. Кроме того, он решает проблему загрузки, скрывая все.targetDivи показывает только первый.

EDIT: Первый вариант должен выделяться красным цветом и при загрузке страницы.http://jsfiddle.net/XwN2L/421/

1
$('.showSingle').click(function () {
   $('.targetDiv').hide();
   $('#div' + $(this).attr('target')).show();
   $('.showSingle').removeClass('selected')
   $(this).addClass('selected');           
});

var active_link = 1; // Change this value to set the active link
$('a[target='+active_link+']').trigger('click');​

Похожие вопросы