Jquery 按按钮并显示文本（和隐藏上一个文本）

我有一些按钮，我想当用户按下它们时，显示一些文本并隐藏上一个按钮的文本。这看起来很简单，但我的代码不起作用（你可以看到它，在这里->）

什么也没发生。。非常感谢

问题：

jQuery没有包含在小提琴中

contentArea

元素是容器，您不应该隐藏该元素，您需要隐藏其中id以

div开头的子元素

同样，

target

属性不在

lnkCollapse

元素中，它在父元素中

试一试

演示：

应该如何做

//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>

演示：

问题：

jQuery没有包含在小提琴中

contentArea

元素是容器，您不应该隐藏该元素，您需要隐藏其中id以

div开头的子元素

同样，

target

属性不在

lnkCollapse

元素中，它在父元素中

试一试

演示：

应该如何做

//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>

演示：

试试看（您的parentNode div正在隐藏其所有子节点，请使用按钮获取此子节点 （由DOM提供）：

标题：
//这是第一个按钮的文本
Lorem ipsum dolor sit amet
//这是第二个按钮的文本
试试看（您的parentNode div正在隐藏其所有子节点，请使用按钮获取此子节点
（由DOM提供）：


标题：
//这是第一个按钮的文本
Lorem ipsum dolor sit amet
//这是第二个按钮的文本
使用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();
 });
});

$（函数（）{
$（'.lnkCollapse'）。单击（函数（）{
$（“[id^=“div”]”）。hide（）；//使用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();
 });
});

$（函数（）{
$（'.lnkCollapse'）。单击（函数（）{
$（'[id^=“div”]'）。hide（）；//+1但我建议使用
数据
属性而不是常规属性，并包含整个id，它们不仅是一个数字+1，而且我建议使用
数据
属性而不是常规属性，并包含整个id而不仅仅是一个数字
<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>

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

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