tab栏点击切换两种实现方法(原生js和vue方式)

1,原生js方式实现,代码如下可参考使用

<!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>js实现tab栏点击切换操作</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .container {
      width: 500px;
      /*height: 700px;*/
      border: 1px solid #000;
      margin: 100px auto;

    }

    .container>ul {
      background-color: skyblue;
      list-style: none;
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 60px;
      line-height: 60px;
    }

    ul>li {
      width: 100px;
      font-size: 20px;
      border-right: 1px solid #000000;
      text-align: center;
      cursor: default;
    }

    ul>li:last-child {
      border-right: none;
    }

    .content {
      width: 100%;
      height: 300px;
    }

    .bottom>.content:nth-child(1) {
      background-color: pink;
    }

    .bottom>.content:nth-child(2) {
      background-color: purple;
      display: none;
    }

    .bottom>.content:nth-child(3) {
      background-color: greenyellow;
      display: none;
    }

    .bottom>.content:nth-child(4) {
      background-color: orange;
      display: none;
    }

    .bottom>.content:nth-child(5) {
      background-color: darkcyan;
      display: none;
    }

    .current {
      background-color: brown;
    }
  </style>
</head>


<body>
  <div class="container">
    <ul>
      <li class="current">新闻</li>
      <li>科技</li>
      <li>数码</li>
      <li>游戏</li>
      <li>搞笑</li>
    </ul>

    <div class="bottom">
      <div class="content">新闻内容</div>
      <div class="content">科技内容</div>
      <div class="content">数码内容</div>
      <div class="content">游戏内容</div>
      <div class="content">搞笑内容</div>
    </div>

  </div>
  <script>
    var oli = document.querySelectorAll('li')
    var oDiv = document.querySelectorAll('.content')
    let firstIndex = 0
    for(let i = 0; i < oli.length; i++) {  // 闭包(使用let不要var)
      oli[i].onclick = function() {
        oli[firstIndex].className = ''
        oDiv[firstIndex].style.display = 'none'
        oli[i].className = "current"
        oDiv[i].style.display = 'block'
        firstIndex = i
      }
    }
  </script>
</body>



</html>

方式二: vue方式实现,代码可参考使用

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>vue实现tab栏点击切换</title>
		<script src="https://cdn.jsdelivr.net/npm/vue"></script>
		<style>
			button {
				width: 40px;
				height: 30px;
				text-align: center;
				border: none;
				cursor: pointer;
			}
 
			.active {
				background: red;
				color: #fff;
				border: none;
			}
 
			* {
				margin: 0;
				padding: 0;
				list-style: none;
			}
 
			#app {
				width: 600px;
				height: 600px;
				border: 1px solid #b3b3b3;
				margin: auto;
			}
 
			ul {
				height: 50px;
				background-color: #b6b6b6;
				color: #000;
				display: flex;
				justify-content: space-between;
				align-items: center;
			}
 
			ul li {
				width: 150px;
				text-align: center;
				line-height: 50px;
				font-size: 18px;
			}
 
			#app div {
				padding: 10px;
				font-size: 18px;
			}
 
			.active {
				background-color: #00557F;
				color: #fff;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<ul>
				<li v-for="(val,index) in item" @click="handleChange(index)" :class="{active:index == num}">{{item[index]}}
				</li>
			</ul>
			<div v-for="(val,index) in cont" v-show="index==num">{{val}}</div>
 
		</div>
		<script>

			new Vue({
				el: '#app',
				data: {
					item: ["html", "css", "js", "Vue.js"], //导航栏标题
					cont: ["html内容", "css内容", "js内容", "Vue.js内容"], // 底部选项卡内容
					num: 0
				},
				methods: {
					handleChange(key) {
						this.num = key;
					}
				}
			});
		</script>
	</body>
</html>

两种方式参考网络写法使用

你可能感兴趣的:(笔记,javascript,vue.js,前端)