点击按钮切换div及其内容（两种方法：Vue指令方式、原生DOM操作方式）

width: 700px;

margin: auto;

/按钮样式/

/未选中时/

.btn {

width: 150px;

height: 40px;

border: 0;

border-radius: 5px;

color: white;

margin: 20px 3px;

background-color: #35cc8f;

}

/选中时/

.btn1 {

width: 150px;

height: 40px;

border: 0;

border-radius: 5px;

color: white;

margin: 20px 3px;

background-color: #099941;

}

#content1, #content2, #content3, #content4 {

background-color: #c1f8c9;

height: 300px;

font-size: 16px;

line-height: 40px;

}

}

---

方法二  使用DOM操作（不推荐，了解即可）

大致思路：

为每个按钮设置点击事件并传值，通过switch方法来控制选中项，选中后用DOM操作获取对应的元素并设置对应的属性和样式；

完整代码如下：

<button id=“btn1” @click=“tab(1)”>Java

<button id=“btn2” @click=“tab(2)”>C+

<button id=“btn3” @click=“tab(3)”>JavaScript

<button id=“btn4” @click=“tab(4)”>PHP

Java语言：Java是一门面向对象编程语言，不仅吸收了C++语言的各种优点，还摒弃了C++里难以理解的多继承、指针等概念。

C语言：C语言是一门面向过程的、抽象化的通用程序设计语言，广泛应用于底层开发。

JavaScript：是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。

PHP：是在服务器端执行的脚本语言，尤其适用于Web开发并可嵌入HTML中。