Использование техники CSS «Активная вкладка» на одной странице

Question

Я строю навигационную систему, используя jquery scrollto. У меня есть меню навигации в отдельном файле ((navigation.php)). Он включен в 5 мест на первой странице ((5 различных разделов с текстом после каждого)). Я пытаюсь найти способ выделить текущую вкладку. Я мог бы жестко запрограммировать навигацию в каждом месте, чтобы убедиться, что она отображается правильно, но я бы лучше использовал метод phpinclude (). Другая проблема заключается в том, что каждая вкладка имеет свой уникальный цвет ((cmykd)). Здесь - это альфа-версия того, что я делаю ((когда вы нажимаете && на странице, слайды, «активная вкладка» по-прежнему остается серой - я бы хотел, чтобы это был соответствующий цвет)).

Надеюсь, что все это имеет смысл && заранее спасибо !!

Answer 1

Сначала немного.

У вас есть один и тот же <ul> в нескольких местах, каждый с одинаковым 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, а не идентификаторы

Answer 2

Как только вы измените несколько id s на классы (поскольку id s должны быть уникальными), вы можете сделать что-то вроде этого:

.a1 .q1 a
{
    color: cyan;
}

.a2 .q2 a
{
    color: magenta;
}

...