在单个页面上使用 css“活动选项卡”技术

Question

我正在使用 jquery scrollto 构建导航系统。我在一个单独的文件（（navigation.php））中有我的导航菜单。它包含在第一页的 5 个位置（（（5 个不同的部分，每个部分后面有文字））。我正在尝试找出一种方法来突出显示当前的“标签”。我可以对每个位置的导航进行硬编码，以确保它以正确的方式显示，但我宁愿使用 phpinclude() 方法。另一个问题是每个“标签”都有自己独特的颜色（（ cmykd ））。 Here 是我正在做的事情的 alpha 版本（（当您单击 && 页面幻灯片时，“活动选项卡”仍然保持灰色 - 我希望它是相应的颜色））。

希望这一切都有意义&&提前感谢！！

Answer 1

先说几句。

您在多个地方都有相同的<ul>，每个地方都有相同的id。与共享 ID 的多个 <li> 元素相同。这不仅是无效的 HTML，而且通常是一种不好的做法。

其次，您的文档大纲是倒退的。您的文本位于 <h2> 元素中，而您的导航/标题位于 <h3> 元素中。这也是无效的，也是不好的做法。

接下来，让我们谈谈导航栏的其余 HTML（它们兼作部分标题）及其内容部分。让我们看看其中两个（创意和极简主义）的新 HTML

<div id="a1" class="section creativity">
  <ul class="nav">
    <li class="creativity"><a href="#a1">Creativity</a></li>
    <li class="minimalism"><a href="#a2">Minimalism</a></li>
    <li class="youthfulness"><a href="#a3">Youthfulness</a></li>
    <li class="kuler"><a href="#a4">Kuler</a></li>
    <li class="design"><a href="#a5">Design</a></li>
  </ul>
  <p>Lorem ispum...</p>
</div>

<div id="a2" class="section minimalism">
  <ul class="nav">
    <li class="creativity"><a href="#a1">Creativity</a></li>
    <li class="minimalism"><a href="#a2">Minimalism</a></li>
    <li class="youthfulness"><a href="#a3">Youthfulness</a></li>
    <li class="kuler"><a href="#a4">Kuler</a></li>
    <li class="design"><a href="#a5">Design</a></li>
  </ul>
  <p>Lorem ispum...</p>
</div>

这里的关键要点是

• 元素的语义使用
• 类名的语义使用
• 无行为

接下来，CSS 发生变化

div.section ul.nav {
  font: 35px 'ChunkFiveRegular', Arial, sans-serif;
  letter-spacing: 0;
  padding: 0px;
  margin: 0px;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  width:100%;
  list-style-type: none;
}

div.section ul.nav li {
  display:inline;
  padding: 0px;
  margin: 0px;
}

div.section p {
  font: 36px 'ChunkFiveRegular', Arial, sans-serif;
  letter-spacing: 0;
}

div.section.active ul.nav li a {
  color: #ddd;
}

a:link {color:#999; text-decoration: none;}
a:visited {color:#999; text-decoration: none;}
a:hover {color:#000; text-decoration: none;}

li.creativity a:hover, div.creativity.active li.creativity a {color:#00ffff !important;}
li.minimalism a:hover, div.minimalism.active li.minimalism a {color:#ff00ff !important;}
li.youthfulness a:hover, div.youthfulness.active li.youthfulness a {color:#ffff00 !important;}
li.kuler a:hover, div.kuler.active li.kuler a {color:#000000 !important;}
li.design a:hover, div.design.active li.design a {color:#666666 !important;}

这里的要点是

• 类名的语义使用
• 基于继承的着色

最后，修改你的 jQuery

jQuery.noConflict();

jQuery(function($)
{
  $("ul.nav li a").click(function( event )
  {
    event.preventDefault();
    var target = $(this).attr( 'href' );

    $.scrollTo(
        target.replace( '#', '' )
      , {   duration: 800
          , axis: "y"
          , onAfter: function()
            {
              $( 'div.section.active' ).removeClass( 'active' );
              $( target ).addClass( 'active' );
            }
        }
    );
  });

  $(".return-top").click(function()
  {
    $.scrollTo("body", {duration: 800, axis:"y"});
  });
});

这里的要点是

• 此处添加了从链接中删除的行为
• 现在依赖 CSS 类，而不是 ID

Answer 2

一旦您将多个 ids 更改为类（因为 ids 必须是唯一的），您可以执行以下操作：

.a1 .q1 { 颜色：青色； } .a2 .q2 一个 { 颜色：洋红色； } ...