點擊導航欄按鈕切換按鈕背景色

決點擊導航欄點擊哪個，哪個就高亮變色，其他恢復原狀。

這里我用的是vue框架和element ui組件庫寫的。主要就是一個點擊事件和一個for循環。

HTML

  <div id="app">
    <!-- 導航欄 -->
    <div id="nav">
      <router-link 
	      @click.native="dianji(index)" 
	      :class="{ clk: index==dynamic }"
	      v-for="(item, index) in navArr" 
	      :key="index" 
	      :to="item.path">
	      {{ item.content }}
      </router-link>
    </div>
    <router-view />
  </div>

@click.native和@click差不多，但是router-link會阻止click事件，所有加一個native就可以了。

<script>
export default {
  name: "app",
  data() {
    return {
      // 導航按鈕數組
      navArr: [
        { path: "/one", content: "第一個按鈕" },
        { path: "/two", content: "第二個按鈕" },
        { path: "/three", content: "第三個按鈕" },
        { path: "/four", content: "第四個按鈕" },
      ],
      dynamic:0, //默認第一個
    };
  },
  methods: {
    // 點擊切換導航欄背景色
    dianji: function (index) {
      this.dynamic=index;
    },
  },
};
</script>

css這里我就不寫了，就幾行代碼。

效果圖

沒了，結束了，是不是很簡單吶，如有問題，歡迎留言。
如果此篇博文對您有幫助，還請動動小手點贊收藏 ?留言吶~，謝謝 ~ ~

天給大家帶來是一個金屬的開關，大家看一下，別看著操作很簡單但是很復雜的，包括這里面沒有用任何的圖片和圖標，純用css寫出來的，大家可以看一下。

解析一下代碼區域，我的開發工具是h pro x開發uni up。

·首先用個vivo式的容器定一個容器，里面放了個第二層的vivo式的容器，里面弄了個老本開關標簽，弄一個開關手柄。

·在unif中應該知道是什么意思，就是隨著真假而變換樣式，兩個，大家看這個顏色就應該知道了，是背景滑動的時候，下面就是位置的變化。

·gs部分定義了個flash，在進行點擊的時候從真變假，從假變成真的切換，樣式就跟著真假進行變換的。

·cs部分都是提前定義好的固定的樣式，這是整體的。

·這就是開關容器的基本的設定，大家可以看到它的大小、寬高，取消底部外編劇的，把這個刪掉，其實也沒什么用，前面多寫了，可以刪掉。

·這個是開關標簽樣式的設定，就是顏色根據真假進行變化，說白就是固定的，除了顏色以外其他都是固定的。

·這個就是開關手柄，就金屬的手柄的樣式，大家可以牢記一下，可以自己動手去寫一下。

其實就這么幾行，cs部分基本上都是固定的固定色，只有這里進行了真假的切換和樣式的切換才形成動態的效果。

喜歡的可以點贊收藏一下，想要這個元代碼的可以找我嘮嗑或者點擊下方都可以，多多會給你們發送，但是我還是點個自己動手去寫，我還是建議，今天就先講到這。

們在設計網站的時候，有時候為了體現出別具一格的風格，往往會設計出一些特殊的風格。這里就舉一個比較常見的例子 —— 傾斜的背景顏色。

在CSS中，沒有某一個屬性能夠直接實現傾斜的背景顏色，而是需要通過一些“手段”來實現。最常想到的方案就是在內容的底部放置一個div，給這個div設定一個背景顏色，然后讓這個div傾斜一個角度，從而實現傾斜的背景顏色。比如像下圖所示的案例：

那么下面就來用一個基本的實例來解釋并實現傾斜背景的效果：

首先要說明一下，頁面導航條是固定在頁面頂部的，導航條不會隨著頁面的滾動而移動。這個效果的實現非常簡單，就是利用了 position 這個屬性的 fixed 值來實現的。

我下面的代碼實例中，HTML用來給頁面上添加元素，而在 CSS 部分需要精細化的設定屬性的參數值，而且需要若干個HTML標簽的CSS來配合，從而實現傾斜背景的效果。所以我在CSS代碼部分用了比較多的注釋來描述這些屬性的效果和目的，大家在閱讀的時候可以將 CSS 結合著 HTML 一起來理解。或者可以直接拿我的這個實例作為一個模板來使用。

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>

    <div class="navbar-bg">
        <ul class="navbar">
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item">
                <a href="https://www.baidu.com">Home</a>
            </li>
            <li class="item sign">
                <a href="https://www.baidu.com">Sign</a>
            </li>
        </ul>
    </div>

    <div class="box-bg">
        <div class="box">
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
            <div class="item">
                <h1>Title</h1>
                <p>This is the description for title.</p>
                <button>click me</button>
            </div>
        </div>
    </div>

    <div class="content">
        <h1>This is content</h1>
    </div>

    <div class="footer">
        <div class="footer-bg">
            <ul class="list">
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
                <li>
                    <a href="https://greatfrank.cn">Link</a>
                </li>
            </ul>
        </div>
    </div>

</body>

</html>

為了讓導航條和其他元素都能夠與頁面的兩邊留出距離，我在實際內容標簽的外圍又包裹了一層div，主要在這個包裹的div里設定左右內間距，從而實現兩邊留白的效果。這些外圍包裹的 div 的 class 名稱一般都會有一個后綴 "-bg"。

在實際內容的排列時，我采用了更加方便靈活的彈性布局，這樣會相對的減少HTML和CSS的代碼量。

另外，如果想要實現傾斜的背景顏色，那么這些帶有 bg 后綴的 div 就是需要傾斜的標簽。傾斜這些 div 其實很簡單，只需要設定一個 transform: skew(0deg, -9deg) 這樣的CSS代碼即可，但是我們可以想象一下，原本是長方形的 div 按照 Y 軸逆時針旋轉了一個弧度（-9deg）后，它會變成一個平行四邊形，這個平行四邊形是左邊低右邊高。這樣就會露出它后面的白色的 body 的部分。所以這種玩法麻煩的地方就是如何通過多個 CSS 屬性的配合來遮住露出的白色的body部分。下面就來看一下這個HTML對應的 CSS 代碼部分。

在大家閱讀 CSS 的代碼之前，我給出一個原理圖來解釋一下其中的原理：

當外圍的 div 傾斜了之后，就需要把內容部分的div的上部的內間距增大，以此來遮住平行四邊形的左側露出的白色區域。這是頁面上部區域的原理。

那么頁面底部也同樣需要實現這樣傾斜背景顏色的設計，這樣才能將風格一致，產生美感。原理還是這個原理圖所示的邏輯，不同的地方在于，底部最外圍的 div 不傾斜，而是需要兩個屬性，height 和 overflow-y，并且這個 div 不能帶有背景顏色。它們的作用是當它里面的內容超出這個 div 的區域時就不顯示，這樣就會讓上圖中藍色的平行西變形的左下角區域被紅色的框線裁剪掉，從而讓這個div 乖乖的呆在頁面的底部。而這個 div 里面一層的 div 需要讓它傾斜，而且還帶有一個背景顏色。這樣組合出來的效果就是一個看似是左右兩邊是豎線，下部是橫線，只有上部是斜線的帶有背景顏色的四邊形，這個四邊形里面是實際的頁面內容。

最終的樣子在這篇 CSS 代碼的最后展示出來了。

CSS

在線咨詢

上一篇：html5的盛況，flash的哀嚎
下一篇：微軟Win10新版本推送：更好看的Fluent De

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

點擊導航欄按鈕切換按鈕背景色

決點擊導航欄點擊哪個，哪個就高亮變色，其他恢復原狀。

效果圖

HTML

CSS

您的項目需求