帶有CSS3和HTML的有效顏色

Question

我的模板上出現了活動色彩，我已經使用了此模板http://codepen.io/suez/pen/XJGOyL

如何激活菜單，例如單擊其他未激活的菜單時。 這個怎么做？

這是我的代碼：

//HTML
<div class="demo__content">
<h2 class="demo__heading">What do you need help with?</h2>
<div class="demo__elems">

    <div class="demo__elem demo__elem-1">With advertising online</div>
    <div class="demo__elem demo__elem-2">With a website</div>
    <div class="demo__elem demo__elem-3">I need help with both</div>

    <span class="demo__hover demo__hover-1"></span>
    <span class="demo__hover demo__hover-2"></span>
    <span class="demo__hover demo__hover-3"></span>

    <div class="demo__highlighter">
        <div class="demo__elems">
            <div class="demo__elem">With advertising online</div>
            <div class="demo__elem">With a website</div>
            <div class="demo__elem">I need help with both</div>
        </div>
    </div>

</div>

//CSS
 .demo__hover-2 {
      top: 7rem;
    }
    .demo__hover-2:hover ~ .demo__highlighter {
      -webkit-transform: translateY(7rem);
      transform: translateY(7rem);
    }
    .demo__hover-2:hover ~ .demo__highlighter .demo__elems {
      -webkit-transform: translateY(-7rem);
      transform: translateY(-7rem);
    }
    .demo__hover-3 {
      top: 14rem;
    }
    .demo__hover-3:hover ~ .demo__highlighter {
      -webkit-transform: translateY(14rem);
      transform: translateY(14rem);
    }
    .demo__hover-3:hover ~ .demo__highlighter .demo__elems {
      -webkit-transform: translateY(-14rem);
      transform: translateY(-14rem);
    }
    .demo__elem a:active, a:hover, a:focus {
      text-decoration: none;
      outline: none;
    }

Answer 1

如果您能夠在代碼中使用jQuery，則可以通過向菜單的選定元素中添加“活動”類來實現。

例如

$(".demo__elem").click(function() {
  $(".demo__elem").removeClass("active"); // remove active from all
  $(this).addClass("active"); // add active to this
});

並且您的“活動” css也應設置樣式。

Answer 2

如果要單擊鏈接，請轉到該頁面，並讓該鏈接在進入該頁面后保持活動狀態，則需要執行以下三項操作之一。

1. 僅使用HTML和CSS，每個頁面都可以完全獨立地構建。 這稱為靜態網站。 菜單將顯示在每個頁面上，並且您所在頁面的鏈接將需要唯一的ID（通常為class="active" ），以便將其設置為活動鏈接。 使用CSS，您可以樣式顯示所需的樣式。

2. 您通常可以通過閱讀URL來使用javascript動態檢測您所在的頁面，並將活動狀態應用於相應的鏈接。

3. 您可以使用服務器端編碼語言（例如PHP ，ASP，RUBY等），並設置菜單以基於內部/服務器端代碼動態檢測您所在的頁面，並將活動狀態應用於菜單。 這是一種非常干凈的方法，一旦掌握了所選擇的語言，這是一種非常簡單有效的方法。 這是開發人員最受歡迎的選擇，被稱為動態網站。

在每種情況下，您仍將以完全相同的方式使用CSS設置活動鏈接的樣式。