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

你有几个关键问题。

您需要preventDefault()点击<a>，否则用户将会点击该链接，从不会看到您的转化。
id标记上的<nav>版本不正确。它不应该有#前缀。

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

您已将document.ready()处理程序双重包装。无需额外的功能声明。
要定位您的可点击项，您可以使用$("#nav a")，因为a是#nav的后代。如果您只想定位特定的子节点结构，则您的选择器将为$("#nav > ul > li > a")。

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

当点击导航链接时，如何使用相同的类旋转一些图像 - 使用jquery＆amp; CSS

1 个答案: