0

我有以下内容：

JS：

  $('.home-toggle').click(function() {
    scroll();
    $('#content twelvecol > a').removeClass('selected-tile');
    $(this).addClass('selected-tile');
    $('.hidden').hide();
    $('.home-container').slideDown();
  });

  $('.why-toggle').click(function() {
    scroll();
    $('#content twelvecol > a').removeClass('selected-tile');
    $(this).addClass('selected-tile');
    $('.hidden').hide();
    $('.why-container').slideDown();
  });

HTML：

<div id="content" class="container" style="display:none;">
  <div class="row">
    <div class="twelvecol">
      <a href="#" class="home-toggle tile first">
        <img class="tile-top" src="images/tile1.png" alt="" />
        <img class="tile-bottom" src="images/tile1h.png" alt="" />
      </a>
      <a href="#" class="why-toggle tile">
        <img class="tile-top" src="images/tile2.png" alt="" />
        <img class="tile-bottom" src="images/tile2h.png" alt="" />
      </a>
      <a href="#" class="solutions-toggle tile last">
        <img class="tile-top" src="images/tile3.png" alt="" />
        <img class="tile-bottom" src="images/tile3h.png" alt="" />
      </a>

因此，一旦我单击一个，就.selected-tile应该从另一个中删除。.tile

但由于某种原因，该类仍保留在其他图块中。

可能是什么问题呢？

4

3 回答 3

7

您的选择器中有错误

$('#content twelvecol > a')

应该

$('#content .twelvecol > a')
//          ^ dot

由于后者选择的是容器内的顶级子节点，其类为12，它本身位于 id 为 的元素内content。

于 2013-02-06T06:24:00.680 回答
1

不仅点不见了，而且>不见了。它应该是：

$('#content > .row> .twelvecol > a');

>仅适用于子元素，而不是孙子。

因此，如果您有：

<div id="a">
    <div class="b">
        <div class="c">
        </div>
    </div>
</div>

$('#a > .c')不会引用预期的 div。它应该是$('#a > .b > .c')或$('#a > div > .c')相反。

在此处查看演示：http: //jsfiddle.net/S2JV3/1/

于 2013-02-06T06:33:09.950 回答
1

您的代码不正确。您的twelvecol课程缺少一个点。

修改以下部分，用于单击功能：

$('#content .twelvecol > a').removeClass('selected-tile');
于 2013-02-06T06:26:08.170 回答