点击导航栏按钮切换按钮背景色

决点击导航栏点击哪个，哪个就高亮变色，其他恢复原状。

这里我用的是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

您的项目需求