php - 在单个页面上使用 css "active tab"技术

Question

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

希望这一切都有意义 && 提前致谢!!

Answer 1

先说几件事。

你有相同的<ul>在多个地方，每个地方都有相同的id .与多个 <li> 相同元素共享 ID。这不仅是无效的 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