How to realize the effect of switching pages with JavaScript/jQuery
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!
