JavaScript/jQuery實現(xiàn)切換頁面效果

更新時間：2022年03月25日 14:36:12 作者：湯圓小丸嘰

這篇文章主要為大家詳細介紹了JavaScript或jQuery實現(xiàn)切換頁面效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript/jQuery實現(xiàn)切換頁面效果的具體代碼，供大家參考，具體內容如下

<!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>切換頁面</title>
?? ??? ?<style>
?? ??? ??? ?* {
?? ??? ??? ??? ?margin: 0;
?? ??? ??? ??? ?padding: 0;
?? ??? ??? ?}

?? ??? ??? ?li {
?? ??? ??? ??? ?list-style-type: none;
?? ??? ??? ?}

?? ??? ??? ?.tab {
?? ??? ??? ??? ?width: 978px;
?? ??? ??? ??? ?margin: 100px auto;
?? ??? ??? ?}

?? ??? ??? ?.tab_list {
?? ??? ??? ??? ?height: 39px;
?? ??? ??? ??? ?border: 1px solid #ccc;
?? ??? ??? ??? ?background-color: #f1f1f1;
?? ??? ??? ?}

?? ??? ??? ?.tab_list li {
?? ??? ??? ??? ?float: left;
?? ??? ??? ??? ?height: 39px;
?? ??? ??? ??? ?line-height: 39px;
?? ??? ??? ??? ?padding: 0 20px;
?? ??? ??? ??? ?text-align: center;
?? ??? ??? ??? ?cursor: pointer;
?? ??? ??? ?}

?? ??? ??? ?.tab_list .current {
?? ??? ??? ??? ?background-color: #c81623;
?? ??? ??? ??? ?color: #fff;
?? ??? ??? ?}

?? ??? ??? ?.item_info {
?? ??? ??? ??? ?padding: 20px 0 0 20px;
?? ??? ??? ?}

?? ??? ??? ?.item {
?? ??? ??? ??? ?display: none;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<div class="tab">
?? ??? ??? ?<!-- 標題 -->
?? ??? ??? ?<div class="tab_list">
?? ??? ??? ??? ?<ul>
?? ??? ??? ??? ??? ?<li class="current">標題1</li>
?? ??? ??? ??? ??? ?<li>標題2</li>
?? ??? ??? ??? ??? ?<li>標題3</li>
?? ??? ??? ??? ??? ?<li>標題4</li>
?? ??? ??? ??? ??? ?<li>標題5</li>
?? ??? ??? ??? ?</ul>
?? ??? ??? ?</div>
?? ??? ??? ?<!-- 內容 -->
?? ??? ??? ?<div class="tab_con">
?? ??? ??? ??? ?<div class="item" style="display: block">內容1</div>
?? ??? ??? ??? ?<div class="item">內容2</div>
?? ??? ??? ??? ?<div class="item">內容3</div>
?? ??? ??? ??? ?<div class="item">內容4</div>
?? ??? ??? ??? ?<div class="item">內容5</div>
?? ??? ??? ?</div>
?? ??? ?</div>
?? ??? ?<script>
?? ??? ??? ?//獲取元素,獲取所有的小li
?? ??? ??? ?var tab_list = document.querySelector('.tab_list');
?? ??? ??? ?var lis = tab_list.querySelectorAll('li');
?? ??? ??? ?var items = document.querySelectorAll('.item');

?? ??? ??? ?//排他思想，遍歷標題
?? ??? ??? ?for (var i = 0; i < lis.length; i++) {
?? ??? ??? ??? ?//給每一個小li自定義屬性，index
?? ??? ??? ??? ?lis[i].setAttribute('index', i);
?? ??? ??? ??? ?//注冊事件
?? ??? ??? ??? ?lis[i].onclick = function () {
?? ??? ??? ??? ??? ?//先清除所有樣式
?? ??? ??? ??? ??? ?for (var i = 0; i < lis.length; i++) {
?? ??? ??? ??? ??? ??? ?lis[i].className = '';
?? ??? ??? ??? ??? ?}
?? ??? ??? ??? ??? ?//點擊時，加class樣式
?? ??? ??? ??? ??? ?this.className = 'current';
?? ??? ??? ??? ??? ?var index = this.getAttribute('index');

?? ??? ??? ??? ??? ?for (var i = 0; i < items.length; i++) {
?? ??? ??? ??? ??? ??? ?items[i].style.display = 'none';
?? ??? ??? ??? ??? ?}

?? ??? ??? ??? ??? ?items[index].style.display = 'block';
?? ??? ??? ??? ?};
?? ??? ??? ?}
?? ??? ?</script>
?? ?</body>
</html>

結果：

jQuery思路：

<script>
? ? ? ? $(function() {
? ? ? ? ? ? // 1.點擊上部的li，當前l(fā)i 添加current類，其余兄弟移除類
? ? ? ? ? ? $(".tab_list li").click(function() {
? ? ? ? ? ? ? ? // 鏈式編程操作（點擊加入類，其余的清除類樣式）
? ? ? ? ? ? ? ? $(this).addClass("current").siblings().removeClass("current");
? ? ? ? ? ? ? ? // 2.點擊的同時，得到當前l(fā)i 的索引號
? ? ? ? ? ? ? ? var index = $(this).index();
? ? ? ? ? ? ? ? console.log(index);
? ? ? ? ? ? ? ? // 3.讓下部里面相應索引號的item顯示，其余的item隱藏
? ? ? ? ? ? ? ? $(".tab_con .item").eq(index).show().siblings().hide();
? ? ? ? ? ? });
? ? ? ? })
</script>

結果：