1

我有以下 HTML：

<div class="headings">
  <h1 class="one seleced"><a href="#">One</a></h1>
  <h1 class="two"><a href="#">Two</a></h1>
  <h1 class="three"><a href"#">Three</a></h1>
</div>
<div class="paragraphs">
  <p class="one">Hello One</p>
  <p class="two">Hello Two</p>
  <p class="three">Hello Three</p>
</div>

（或类似的东西）。我想建立一个 jQuery 函数，考虑到这些目标：

  1. 当文档加载时，除了与所选标题对应的段落之外的所有段落都被隐藏。因此，一开始这将是除了第一段之外的所有内容，但我希望代码是通用的，这样如果我添加另一个标题和段落，我就不必更改任何 jQuery 代码。

2a. 当点击标题 foo 时，“selected”类将应用于除标题 foo 之外的所有内容，因此只有标题 foo 具有“selected”类，通过 css 用于相应地设置 foo 元素的样式。

2b。单击标题 foo（例如第二个）时，只有相应的段落可见（在本例中为第二个）。

我想要类似的东西：

  $(document).ready(function() {
    $(".headings a").onClick(function() {
      $this.addClass("selected");
      others().removeClass("selected");
    }

    var selectionIndex = $(".headings").nForChildWithClass("selected");
    $(".paragraphs").not(childAtIndex("n")).hide();
    $(".paragraphs").(childAtIndex("n")).show();

  });

感谢您对如何达到预期结果的意见。

4

4 回答 4

2

您可以使用h1's索引来定位相应的段落：

$('div.headings > h1').on('click', function() {
    var $this = $(this), idx = $this.index();
    $this.addClass('selected').siblings().removeClass('selected');
    $('div.paragraphs > p').eq(idx).show().siblings().hide();
}).eq(0).click();

这是一个小提琴

于 2013-06-21T10:25:19.193 回答
1

我会稍微更改 HTML。

<div class="headings">
  <h1 data-num="one" class="seleced"><a>One</a></h1>
  <h1 data-num="two"><a>Two</a></h1>
  <h1 data-num="three"><a>Three</a></h1>
</div>

然后

$(document).ready(function() {
  showSelected();
  $("h1").click(function() {
    $("h1.selected").removeClass("selected");
    $(this).addClass("selected");
    showSelected();
  });
});

function showSelected() {
  var show = $(".selected").data("num");
  $("p").hide();
  $("."+show).show();
}

JSFiddle：http: //jsfiddle.net/hM26j/

（请注意，我更改了标题中“选定”的拼写。

于 2013-06-21T10:25:58.790 回答
1 
$(document).ready(function() {
 $('h1.selected').each(function() {
  var this_class_notselect = $(this).attr('class');
  this_class_notselect = this_class_notselect.replace("selected", "");
  $('p').hide();
  $('p.'+this_class_notselect).show();
 });
 $('h1').on('click', function() {
  var this_class = $(this).attr('class');
  $('h1').removeClass('selected');
  $(this).addClass('selected');
  $('p').hide();
  $('p.'+this_class).show();
 });
});

这段代码应该做到这一点，它可以被增强。

于 2013-06-21T10:27:07.860 回答
1

这里是一个简单的，DEMO http://jsfiddle.net/yyene/b5Sde/

查询

$(document).ready(function(){
    $('.paragraphs p.'+$('h1.selected a').attr('target')).show();
    $('.headings h1 a').on('click', function(){
        $('.paragraphs p').hide();
        $('.paragraphs p.'+$(this).attr('target')).show();
    });
});
于 2013-06-21T10:29:39.960 回答