Нажмите кнопки и показать текст (и скрыть предыдущий текст)

Question

Нажмите кнопки и показать текст (и скрыть предыдущий текст)

0

У меня есть несколько кнопок, и я хочу, когда пользователь нажимает на них, показывает текст и скрывает текст предыдущей кнопки. Кажется простым, но мой код не работает (вы можете видеть его и здесь → CODE)

//These are the buttons
<div class="row-fluid">
    <div class=" span1 offset0" target="1"> <a href="#" class="circle lnkCollapse">TITLE1</a></div>
    <div class="span1 offset4" target="2"> <a href="#" class="circle lnkCollapse">TITLE2</a></div>
</div>

<div class="box">
  <div class="contentArea">
      <div class="box-title">TITLE:</div>

           //this is the text for the 1st button
           <div id="div1">
                <div class="box-text">
                        Lorem ipsum dolor sit amet
                 </div>           
                 <div class="box-links">
                       <a href="#">GO</a>
                       <a href="#">TEST</a> 
                  </div>
            </div>

           //this is the text for the 2nd button
           <div id="div2">
                <div class="box-text">
                     Lorem ipsum dolor sit amet
                 </div>       
                 <div class="box-links">
                      <a href="#">GO</a>
                      <a href="#">TEST</a> 
                 </div>
          </div>
</div>

В заголовке я поставлю это:

    $(document).ready(function() {
         $('.lnkCollapse').click(function () {
               $('.contentArea').hide();
               $('#div' + $(this).attr('target')).show();
         });
    });

и ничего не происходит.. Большое спасибо!

yaylitzis 24 сен. 2013, в 10:13

Источник

Теги:

jquery

3 ответа

1

Попробуйте (div вашего родителяNode скрывает все его дочерние элементы, возьмите этот дочерний узел с помощью кнопок вверх DOM):

<div class="box">
  <div class="contentArea">
      <div class="box-title">TITLE:</div>

           //this is the text for the 1st button
           <div id="div1">
                <div class="box-text">
                        Lorem ipsum dolor sit amet
                 </div>           
                 <div class="box-links">
                       <a href="#">GO</a>
                       <a href="#">TEST</a> 
                  </div>
            </div>

           //this is the text for the 2nd button

</div>
<--------- End Container for close

<div id="div2">
                <div class="box-text">
                     Lorem ipsum dolor sit amet
                 </div>       
                 <div class="box-links">
                      <a href="#">GO</a>
                      <a href="#">TEST</a> 
                 </div>
          </div>

user1956570 24 сен. 2013, в 06:03

1

используйте атрибут данных HTML5, чтобы использовать пользовательские атрибуты. Вот почему data attr был представлен в html5..

попробуй это

HTML

 ...
 <div class="span1 offset0" data-target="1"> <a href="#" class="circle lnkCollapse"> <h3> title 1 </h3></a>
...

JS

$(function(){
 $('.lnkCollapse').click(function () {
   $('[id^="div"]').hide(); //<--- hide all div starting with id as div
   $('#div' + $(this).parent().data('target')).show();
 });
});

скрыть все div чей id страт с div а не родительский элемент (parent div).

скрипка здесь

bipen 24 сен. 2013, в 04:23

Ещё вопросы

Arun P Johny · Accepted Answer · 2013-09-24T06-10-00.000Z

Проблемы:

jQuery не был включен в скрипку
Элемент contentArea - это контейнер, вы не должны скрывать этот элемент, вам нужно скрыть детей внутри него, id которых начинается с div
Опять же, target атрибут отсутствует в элементе lnkCollapse, он находится в родительском элементе

Пытаться

jQuery(function ($) {
    $('.lnkCollapse').click(function () {
        $('.contentArea div[id^=div]').hide();
        $('#div' + $(this).parent().attr('target')).show();
    });
})

Демо: скрипка

Как это сделать?

//use data-target attribute with the complete target selector
<div class="span1 offset0" data-target="#div1"> <a href="#" class="circle lnkCollapse "> <h3> title 1 </h3></a>

тогда

//add a class content to all target div elements to group them
<div class="content" id="div1">
    .....
</div>

тогда

jQuery(function ($) {
    var $contents = $('.contentArea .content');
    $('.lnkCollapse').click(function () {
        $contents.hide();
        $($(this).parent().data('target')).show();
    });
})

Демо: скрипка

+1 Но я бы предложил использовать атрибуты data вместо обычных атрибутов и содержать весь идентификатор, а не только число
@ Итай, думаю, обновления решают это