Shulou(Shulou.com)06/01 Report--

Editor to share with you how to use JavaScript/jQuery to achieve the effect of switching pages, I hope you have something to gain after reading this article, let's discuss it together!

The details are as follows

Switch page * {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 } title 1 title 2 title 3 title 4 title 5 Content 1 content 2 content 3 content 4 content 5 / get element Get all the small li var tab_list = document.querySelector ('.tab _ list') Var lis = tab_list.querySelectorAll ('li'); var items = document.querySelectorAll (' .item'); / / exclusive thoughts, traverse the title 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'; }; } 结果：

JQuery ideas:

$(function () {/ / 1. Click on the upper li, the current li adds the current class, and the rest of the brothers remove the class $(".tab _ list li") .click (function () {/ / chain programming operation (click to join the class, the rest clear the class style) $(this) .addClass ("current"). Siblings (). RemoveClass ("current"); / / 2. Click to get the index number of the current li var index = $(this). Index (); console.log (index); / / 3. Let the item of the corresponding index number in the lower part show, and the rest of the item hides $(".tab _ con .item") .eq (index) .show () .siblings () .hide ();})

Results:

After reading this article, I believe you have a certain understanding of "how to use JavaScript/jQuery to switch pages". If you want to know more about it, you are welcome to follow the industry information channel. Thank you for your reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.