JQUERY

Question

我有以下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函数时考虑到这些目标：

当文档加载除相应的段落之外的所有段落选中的标题是隐藏的。因此，在一开始这将是全部但第一段，但我希望代码是通用的，如果我添加另一个标题和段落我将不必更改任何jQuery代码。

2a上。单击标题foo时，“selected”类将应用于除此之外的所有类标题foo，所以只有标题foo有一个“选中”类通过 css用于相应地设置foo元素的样式。

2B。当标题foo（比如第二个）被点击时，只有相应的段落变得可见（在本例中为第2段）。

我想要类似的东西：

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

  });

感谢您就如何获得所需结果的意见。

Answer 1

您可以使用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();

Here's a fiddle

Answer 2

我会略微更改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/

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

Answer 3

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

这段代码应该这样做，它可以通过增强来实现。

Answer 4

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

JQUERY

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

jQuery选项卡html：隐藏并显示相应的段落

4 个答案:

Here's a fiddle

JQUERY