當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

CSS, JavaScript, jQuery实现标签页切换

發布時間：2025/3/17 javascript 14 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS, JavaScript, jQuery实现标签页切换小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

效果圖參考：

基本實現如下：

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>* {margin: 0;padding: 0;}.outer {width: 60%;margin: 50px auto;background-color: #99aecb;height: 500px;}.title {background-color: #cccccc;border-bottom: red solid 1px;}.title li {display: inline-block;padding: 10px;}.title .activate {color: white;background-color: red;}.hide {display: none;}</style> </head> <body><div class="outer"><ul class="title"><li class="activate" relate="1">商品介紹</li><li relate="2">規格包裝</li><li relate="3">售后保障</li></ul><div class="content"><div id="1">page1</div><div class="hide" id="2">page2</div><div class="hide" id="3">page3</div></div> </div></body> <script src="jquery-3.2.1.js"></script> <script>//點擊title內的三個標題，this增加activate，其余去除activate//取得this的索引，根據索引取出content中對應的頁面，去除hide, 其余頁面加hide//jq事件委派$(".title").on("click", "li", function () { //記住，子元素沒有$$(this).addClass("activate");$(this).siblings().removeClass("activate");var $index = $(this).index();$(".content div").eq($index).removeClass("hide").siblings().addClass("hide");});//jq事件綁定實現// $("li").click(function(){// $(this).addClass("activate");// $(this).siblings().removeClass("activate");// var $index = $(this).index();// $(".content div").eq($index).removeClass("hide").siblings().addClass("hide");// });/// JS 實現 ////// var tabs = document.getElementsByClassName("title")[0].children;// var pages = document.getElementsByClassName("content")[0].children;//// for (var i=0; i<tabs.length; i++) {// //為每個標題都綁定函數// tabs[i].onclick = function() {// //每次執行函數都要遍歷所有標題，判斷為當前點擊標題，增加"activate"，否則移除"activate"// for(var j=0; j<tabs.length; j++) {// if (tabs[j]==this) {// tabs[j].classList.add("activate");// relateId = this.getAttribute("relate"); //當前點擊元素relate屬性對應的id值//// } else {// tabs[j].classList.remove("activate")// }// }//// //根據自定義的relate屬性，將標題和頁面關聯起來// var relateId = this.getAttribute("relate");// //當前激活標簽relate屬性對應的id，通過它，找到對應的顯示頁面// var current_page = document.getElementById(relateId);// for (var k=0; k<pages.length; k++) {// if (pages[k] == current_page) {// pages[k].classList.remove("hide");// } else {// pages[k].classList.add("hide");// }// }// };// } </script></html>

總結

以上是生活随笔為你收集整理的CSS, JavaScript, jQuery实现标签页切换的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： OER 7451 in Load Ind
下一篇：转：用GDB调试程序