jquery - 单击导航链接时如何旋转一些具有相同类别的图像 - 使用 jquery 和 css

Question

由于图像在页眉中，我不能仅使用 CSS 通过单击其中一个导航链接来旋转它们。 我尝试了一个简单的解决方案，但看起来有些不对劲..你能帮我一下吗？

有一个简单的版本:

jQuery(document).ready(function($) {

$(document).ready(function () {
     $("#nav ul li a").click(function () {
        $(".cog").css(
        {'-webkit-transform' : 'rotate(70deg)',
         '-moz-transform' : 'rotate(70deg)',
         '-ms-transform' : 'rotate(70deg)',
         'transform' : 'rotate(70deg)'});
    });
});

});

    <header>

        <div id="header_image">

            <img id="cog" style="display: block;" class="cog" src="images/cog01.png">
            <img class="cog" src="images/cog02.png">
            <img class="cog" src="images/cog03.png">

        </div>

        <nav id="#nav">

            <ul id="fo_menu">
                <li id="fooldal" class="first"><a href="index.php">Főoldal</a></li>
                <li id="menu_separator"></li>
                <li id="bemutatkozas"><a href="index.php?oldal=1">Bemutatkozás</a></li>
            </ul>

        </nav>

    </header>

Answer 1

你有几个关键问题。

1. 你需要preventDefault()在你的 <a>单击，否则用户将点击链接而永远不会看到您的转换。
2. 你的 id在你的 <nav>标签不正确。它不应该有 #前缀。

此外，还有一些小问题需要清理，但不会破坏您的代码:

1. 您已经对 document.ready() 进行了双重包装处理程序。不需要额外的函数声明。
2. 要定位可点击的元素，您只需使用 $("#nav a")自 a是 #nav 的后代 .如果您只想定位特定的 child 节点结构，您的选择器将为 $("#nav > ul > li > a") .

如果您进行这些更改，代码应该像下面的示例一样工作。

$(document).ready(function () {
  $("#nav a").click(function (e) {
    e.preventDefault();
    $(".cog").css(
      {'-webkit-transform' : 'rotate(70deg)',
       '-moz-transform' : 'rotate(70deg)',
       '-ms-transform' : 'rotate(70deg)',
       'transform' : 'rotate(70deg)'});
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="header_image">
  <img id="cog" style="display: block;" class="cog" src="http://lorempixel.com/100/100/" />
  <img class="cog" src="http://lorempixel.com/100/100/" />
  <img class="cog" src="http://lorempixel.com/100/100/" />
</div>

<nav id="nav">
  <ul id="fo_menu">
    <li id="fooldal" class="first"><a href="index.php">Főoldal</a></li>
    <li id="menu_separator"></li>
    <li id="bemutatkozas"><a href="index.php?oldal=1">Bemutatkozás</a></li>
  </ul>
</nav>