Question

我一直试图通过jquery来获取div的nth-child，所以我可以在同一个屏幕上显示不同的内容，有点像标签，但选择器只是不起作用。我有以下代码要处理。

这是标签的代码：

＆＃13;

$("li, .tablink").click(function() {

  var $this = $("li, .tablink")

  if ($this.is(':nth-child(1)')) {
    alert("1");
  } else {
    alert("2");
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabsContent">
  <ul>
    <li class="tabLink active">tab1</li>
    <li class="tabLink">tab2</li>
  </ul>
</div>

<div class="content1">
  first content of the page
</div>
<div class="content2">
  second content of the page
</div>
<div class="content3">
  third content of the page
</div>

＆＃13;

我想要的只是有一个jquery说＆＃34;每当我点击第一个标签时，我都会显示该页面的第一个内容，依此类推＆＃34;

Ps：我不能仅仅使用CSS，因为这是一个大型项目，我必须使用包含项目每个页面中的选项卡的相同HTML文件 - 当然，每个页面拥有自己的标签和内容集。

Answer 1

var $this = $("li, .tablink")不正确。您应该只使用传递给jQuery对象的this，如下所示：$(this)。

＆＃13;

$("li, .tablink").click(function(){
        if ($(this).is(':nth-child(1)')) {
            alert("1");
        } else {
            alert("2");
        }
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabsContent">
  <ul>
    <li class="tabLink active">tab1</li>
    <li class="tabLink">tab2</li>
  </ul>
</div>

    <div class="content1">
      first content of the page
    </div>
    <div class="content2">
      second content of the page
    </div>
<div class="content3">
      third content of the page
    </div>

＆＃13;

但如果我理解你要做的事情，那么你最好只获取索引：

＆＃13;

$("li, .tablink").click(function(){
        alert($(this).index() + 1);
    });

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabsContent">
  <ul>
    <li class="tabLink active">tab1</li>
    <li class="tabLink">tab2</li>
  </ul>
</div>

    <div class="content1">
      first content of the page
    </div>
    <div class="content2">
      second content of the page
    </div>
<div class="content3">
      third content of the page
    </div>

＆＃13;

Answer 2

假设标签和内容排序相同，您可以使用索引。

还假设所有内容都是普通班级

$("li.tabLink").click(function() {
  // $(this).index() gets index of current <li> within it's siblings
  // eq() returns content with same index
  $('.content').hide().eq($(this).index()).show();
});

.content{display:none}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tabsContent">
  <ul>
    <li class="tabLink active">tab1</li>
    <li class="tabLink">tab2</li>
    <li class="tabLink">tab3</li>
  </ul>
</div>



<div class="content">
  first content of the page
</div>
<div class="content">
  second content of the page
</div>
<div class="content">
  third content of the page
</div>

得到div -th-child

2 个答案: