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

Question

У меня есть несколько кнопок, и я хочу, когда пользователь нажимает на них, показывает текст и скрывает текст предыдущей кнопки. Это кажется простым, но мой код разве работает (вы можете увидеть его и здесь ->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(); 
     }); 
    }); 

и ничего не происходит .. спасибо много!

Answer 1

Проблема:

1. JQuery не был включен в скрипке
2. contentArea элемента контейнер, вы не должны скрывать этот элемент, вам нужно, чтобы скрыть ребенок внутри него, чей идентификатор начинается с div
3. Опять атрибут target нет в lnkCollapse элемента, он находится в родительском элементе

Попробуйте

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

Демо: Fiddle

Как это должно быть сделано

//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(); 
    }); 
}) 

Демо: Fiddle

Answer 2

Попробуйте (Ваш ParentNode ДИВ скрывает все его ребенка, возьмите этот дочерний узел с кнопками вверх 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> 

Answer 3

использование HTML5 данных пользовательские атрибуты .. поэтому атр данные вводит в 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(); 
}); 
}); 

скрыть все дивы, чьи идентификатор stratin с div и не родительский элемент (родительский DIV).

fiddle here