选项卡的实现方式

    xiaoxiao2021-03-26  4

    本文主要介绍选项卡的实现:原生javascript和jQuery以及Bootstrap 附上演示地址:https://haochn.github.io/demo/tab-panel/js.html https://haochn.github.io/demo/tab-panel/jquery.html

    html部分:

    <div class="tab"> <div class="title"> <ul id="nav"> <li class="selected">1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div> <div id="contains"> <div>111</div> <div class="hide">222</div> <div class="hide">333</div> <div class="hide">444</div> </div> </div>

    css部分:

    .tab{ margin:0 auto; width:60%; height:300px; padding:0 0; border:1px solid #ccc; } #nav{ height:30px; padding:0; margin:0; font-size: 0; cursor: pointer; } #nav li{ padding:0; margin:0; display: inline-block; width:25%; line-height: 30px; text-align:center; list-style: none; background: #f3f3f3; font-size: 14px; } #nav .selected{ background: #099; } #nav li:hover{ background: #099; } #contains { text-align: center; padding:20px 0; } .hide{ display:none; }

    主要实现方式:

    原生javacsript实现

    源码:

    window.onload = function() { var Nav = document.getElementById("nav"); var NavLi = nav.getElementsByTagName('li'); var contains = document.getElementById("contains"); var containsDiv = contains.getElementsByTagName("div"); TabPanel(NavLi, containsDiv); } //设置处理的方法 function TabPanel(NavLi, containsDiv) { for (var i = 0; i < NavLi.length; i++) { NavLi[i].index = i;//指定当前元素的索引 //点击执行相应操作 NavLi[i].onclick = function() { for (var j = 0; j < NavLi.length; j++) { //将li的css类设置为空 NavLi[j].className = ""; //将bu不需要显示内容的css类设置为hide containsDiv[j].className = 'hide'; } //将点击的元素(当前li的css类设置为selectedf) //并将需要显示的内容设置为可显示(将相应的css类设置为空) NavLi[this.index].className = "selected"; containsDiv[this.index].className = ""; } } }

    jquery实现(相对于原生js,代码更加简介)

    源码:

    核心思想: 对每一个li执行遍历,对点击事件执行相应的方法,执行方法为:判断当前li的类是否为“selected‘’,如果不是将当前li的css类设置为”selected”,并将其同级元素(即其他的li)的css类设置为空,否则,将其同级元素css类设置为空。将要显示的内容显示,其他的隐藏。

    $(document).ready(function() { $('#nav li').each(function() { $($(this).click(function() { if (!$(this).hasClass('selected')) { $(this).addClass('selected').siblings().removeClass(); } else { $(this).siblings().removeClass(); } var id = $(this).index(); $('#contains').children().eq(id).show().siblings().hide(); })) }); })

    知识点:hasClass()查找包含某个类的元素 siblings()查找该元素的所有同胞元素 eq(index) 方法将匹配元素集缩减值指定 index 上的一个

    BootStrap实现:

    参考我的博客:http://blog.csdn.net/u013076360/article/details/52891626

    转载请注明原文地址: https://ju.6miu.com/read-500160.html

    最新回复(0)