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

什么都没有发生..非常感谢！

4

3 回答 3

4

问题：

  1. jQuery 未包含在小提琴中
  2. contentArea元素是容器，你不应该隐藏那个元素，你需要隐藏其中 id 以开头的子元素div
  3. 同样，该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();
    });
})

演示：小提琴

于 2013-09-24T07:17:12.007 回答
1

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

隐藏所有 id 为stratin 的 div，div而不是父元素（父 div）。

在这里摆弄

于 2013-09-24T07:21:25.620 回答
1

试试看（你的 parentNode div 隐藏了他的所有子节点，通过 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>
于 2013-09-24T07:18:11.237 回答