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

0

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

Ниже мой код, который я пробовал до сих пор.

HTML:

<ul id="menu">
                    <li class="page_item current_page_item justClick"><a href="#" data-id="div1">a</a></li>
                    <li class="page_item page-item-2 justClick"><a href="#" data-id="div2">b</a></li>
                    <li class="page_item page-item-2 justClick"><a href="#" data-id="div3">c</a></li>
                    <li class="page_item page-item-2 justClick"><a href="#" data-id="div4">d</a></li>
                    <li class="page_item page-item-2 justClick"><a href="#" data-id="div5">e</a></li>
                    <li class="page_item page-item-2 justClick"><a href="#" data-id="div6">f</a></li>
                    <li class="page_item page-item-2 justClick"><a href="#" data-id="div7">g</a></li>
                    <li class="page_item page-item-2 justClick"><a href="#" data-id="div8">h</a></li>
                    <li class="page_item page-item-2 justClick"><a href="#" data-id="div9">i</a></li>
                </ul>

<div class="content">

</div>

<div class="content1">
cccc1
</div>

<div class="content2">
cccc2
</div>

<div class="content3">
cccc3
</div>

<div class="content4">
cccc4
</div>

<div class="content5">
cccc5
</div>

<div class="content6">
cccc6
</div>

<div class="content7">
cccc7
</div>

<div class="content8">
cccc8
</div>

<div class="content9">
cccc9
</div>

Сценарий:

$('.justClick').bind('click', function() {      
    $('div.content').html($('div.content' + ($(this).index()+1)).html());
});

CSS:

.content {
    background-color: red;
}

Ссылка JSFiddle:

http://jsfiddle.net/6uzU6/

Я получаю доступ к функциональности onclick при щелчке элементов навигации по щелчку, но все div видны.

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

Теги:

3 ответа

2
Лучший ответ

Попробуй это:

$('div').not(".content,.content1").hide();
$('.justClick').bind('click', function() {      
    $('div').not(".content").hide();
    $('div.content').html($('div.content' + ($(this).index()+1)).html());
});

DEMO

Поделиться
  • 0
    Работает нормально, за исключением того, что div.content1 должен быть виден при загрузке страницы.
  • 0
    @NathanLee: Проверьте мой обновленный ответ, братан :)
Показать ещё 1 комментарий
2

Кажется, что в коде отсутствует что-то, потому что нет никакой связи между ссылками и div, которые вы хотите показать. вам потребуется больше атрибутов для поддержания отношений между ними.

Лучшим подходом будет применение общего класса для всех div, таких как "контент-блок" и класс, равный использованию следующего кода.

$(".content-block:not(:first)").hide();

и показать соответствующий div на клике по ссылке

$("#menu li").click(function(e){    
 $(".content-block").eq($(this).index()).show();
});

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

Поделиться
  • 0
    Спасибо @Swati. Я не такой звук в jQuery, так что расставил по кусочкам, чтобы это работало. .content-block:not(:first) касается вашего ответа, .content-block:not(:first) будет работать в кросс-браузерной .content-block:not(:first) ?? +1 за то, что положил время ответить на мой вопрос :)
  • 1
    если это не работает, используйте $(".content-block").hide() и сначала показывайте с $(".content-block:eq(0)").show()
Показать ещё 3 комментария
0 
Give attribute to div runat="server" and Id="dv1"
using property display block and none u can show or hide it
Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню