Question

为解决这个问题付出了太多努力：我的导航菜单包含"a href="#project" project /a"，其中包含另一个 section 。我想要 "project" 来改变颜色 #project 是定位的。我做的非常简单的方法是li a:focus {color:red;}。它的工作原理但必须点击两次。有没有办法让这个焦点只需点击一下就可以了？

    li a:focus{
        padding-top: 5px;
        max-height: 50px;
        opacity: 1;
        color:red;
    }

#project{
opacity: 0;
transition: opacity 0.5s ease;
}

#project:target{
    opacity: 1;
}

<body>
        <nav> <img class="nav_bar" src="images/navigation_stick.png">
            <ul class="subsection">

                <li class="subsection"><a class="none" href="#none">Animation</a>
                        <a href="#project" class="subsection">Project</a>
                </li>

                <li>
                    <h2>Animation</h2>
                    <p>We have created a world-class</p>
                </li>
            </ul>
        </nav>

<section id="project">
        <div class="container">
            <div>
                    <div class="list">
                        <img class="back" src="images/.jpg">
                        <article class="details">
                            <h2 class="details">Windows Civilization</h2>
                            <p class="details">A projection of civilization</p>
                            <a href="" class="button"><span class="butt">See Project</span></a>
                        </article>
                    </div>
            </div>
        </div>
    </section>
    
</body>

http://jsfiddle.net/JHLN4/47/

Answer 1

如果你不喜欢使用一点Javascript，你可以使用一个简单的类更改函数来实现相同的功能。

$('nav a').click(function(){
    if ($(this).hasClass('project')) {
        $(this).addClass('active');
    } else {
        $('.project').removeClass('active');
    }
});

你可以在这里看到一个工作小提琴：http://jsfiddle.net/JHLN4/48/

请注意，我必须将您的CSS规则从li a:focus调整为li a:focus, li a.active，以确保它适应新课程。我还在HTML结构中添加了一个类project，以便在单击另一个a标记时更轻松地删除该类。

查看下面的完整结构（neatened）：

$('nav a').click(function() {
  if ($(this).hasClass('project')) {
    $(this).addClass('active');
  } else {
    $('.project').removeClass('active');
  }
});

li a:focus,
li a.active {
  padding-top: 5px;
  max-height: 50px;
  opacity: 1;
  color: red;
}
    
#project {
  opacity: 0;
  transition: opacity 0.5s ease;
}
    
#project:target {
  opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <nav> <img class="nav_bar" src="images/navigation_stick.png">
    <ul class="subsection">
      <li class="subsection"><a class="none" href="#none">Animation</a>
        <a href="#project" class="subsection project">Project</a>
      </li>
      <li>
        <h2>Animation</h2>
        <p>We have created a world-class</p>
      </li>
    </ul>
  </nav>
  <section id="project">
    <div class="container">
      <div>
        <div class="list">
          <img class="back" src="images/.jpg">
          <article class="details">
            <h2 class="details">Windows Civilization</h2>
            <p class="details">A projection of civilization</p>
            <a href="" class="button"><span class="butt">See Project</span></a>
          </article>
        </div>
      </div>
    </div>
  </section>
</body>

另一个案例：焦点必须点击两次

1 个答案: