Css "Etkin sekmeyi" kullanarak

2 Cevap php

Ben jquery scrollto kullanarak bir navigasyon sistemi inşa ediyorum. Ben ayrı bir dosyaya ((navigation.php)) benim navigasyon menüsü var. Bu ilk sayfada 5 yerlerde ((metin w / 5 farklı bölümlerde her takip)) dahil edilir. Ben mevcut "sekme" highlight'd için bir yol bulmaya çalışıyorum. Ben zor doğru yolu gösterir sağlamak için her yerde navigasyon kod olabilir, ama ben oldukça phpinclude () yöntemi kullanmak istiyorum. Diğer konu her bir "tab" o kendi benzersiz bir renk ((cmykd)) olmasıdır. Here Ben ne yapıyorum alfa sürümü (Eğer && sayfa slaytları tıklatın zaman (, "Etkin sekme" hala gri kalır - Ben bu gelen renk olmak istiyorum )).

Bu bütün mantıklı umut && şimdiden teşekkürler!

2 Cevap

İlk birkaç şey.

Birden fazla yerde, aynı id her biri aynı <ul> vardır. Çoklu kimlikleri paylaşan <li> elemanları ile aynı. Bu geçersiz HTML ama genel olarak sadece kötü bir uygulama değil sadece.

İkinci olarak, belge anahat ters. Navigasyon / başlıklarını <h3> elemanları iken Yazınız <h2> elemanları bulunmaktadır. Bu da geçersiz ve kötü bir uygulamadır.

Sonra, (bölüm başlıkları olarak ikiye katlıyoruz) navigasyon çubukları ve içerik bölümleri için HTML kalanı hakkında konuşalım. Adlı iki tanesi (Yaratıcılık ve Minimalizm) için yeni HTML bakalım

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

Burada anahtar takeaways

  • Elemanların anlamsal kullanımı
  • Sınıf adları anlamsal kullanımı
  • Hiçbir davranış

Daha sonra, CSS değiştirir

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

Anahtar takeaways burada

  • Sınıf adları anlamsal kullanımı
  • Kalıtım bazlı boyama

Ve son olarak, jQuery için modifikasyon

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"});
  });
});

Anahtar takeaways burada

  • Bağlantılardan çıkarıldı davranış burada ilave edilir
  • Şimdi CSS sınıfları değil, kimlikleri dayanır

Eğer birden id s sınıfların (id s benzersiz olmalıdır beri) değiştirdikten sonra, böyle bir şey yapabilirsiniz:

.a1 .q1 a
{
    color: cyan;
}

.a2 .q2 a
{
    color: magenta;
}

...

etiketler