JS-【同页面多次调用】tab选项卡封装

这两天遇到一个页面,同一个页面中同一个特效会用好多次,比如tab,比如轮播等。我又不想很不负责任的复制一遍代码,那样页面臃肿,自己心里也堵得慌。于是就想着把代码封装起来多次调用。

对于封装,只在公开课看过一个老师操作,自己也是啥也不懂得。

好歹最后在群里大神的指导下,一步一步的由简致难完善了。就上最后的版本吧,中间的迭代版,,也只是方便以后封装其他的话参考用。

最后的总结就是,一口吃不成个胖子,我前两天一直想的是封装起来,就从最难的代码开始捣鼓,捣鼓半天把自己都绕晕了。程序这回事,你思路比电脑清楚,首先就应该想的比电脑还简单,然后再绕线升级。一上来就打大boss的游戏,什么装备和技能都还没攒,你不死谁死。

html:

<div class="aTapWrap aboutA_P" id="aTapWrap">
            <ul id="aTapHeadWrap">
                <li class="tapActiveLi">关于我们</li>
                <li>
                    联系方式</li>
                <li>
                    意见建议</li>
            </ul>
            <div class="aTapWrapS" id="aTapWrapS">
                <div>
                    <p>文字1</p>
                </div>
                <div class="hide">
                    <p>文字2</p>
                </div>
                <div class="hide">
                    <p>文字3</p>
                </div>
            </div>
        </div>
        <div class="aTapWrap aboutA_P" id="aTapWrap2">
                <ul id="aTapHeadWrap2">
                    <li class="tapActiveLi">关于我们</li><li>
                    联系方式</li><li>
                    意见建议</li>
                </ul>
                <div class="aTapWrapS" id="aTapWrapS2">
                    <div>
                        <p>文字1</p>
                    </div>
                    <div class="hide">
                        <p>文字2</p>
                    </div>
                    <div class="hide">
                        <p>文字3</p>
                    </div>
                </div>
        </div>

js:

<script type="text/javascript">
            window.onload = function(){
                function For(c,d){
                        for(var i = 0; i < c.length; i++) {
                        c[i].index = i;
                        c[i].onclick = function(e) {
                            for(var j = 0; j < c.length; j++) {
                                c[j].className = "";
                                d[j].className = "hide";
                            }
                            this.className = "tapActiveLi";
                            d[this.index].className = "";
                            }
                        }
                    }
                function tab(a,b){
                    var aLi = document.getElementById(a).getElementsByTagName(‘li‘);
                    var aDiv = document.getElementById(b).getElementsByTagName(‘div‘);
                    For(aLi,aDiv)
                };
                tab(‘aTapHeadWrap‘,‘aTapWrapS‘);
                tab(‘aTapHeadWrap2‘,‘aTapWrapS2‘);

            }
        </script>

css:

<style type="text/css">
            .hide {
                display: none;
            }

            li {
                list-style: none;
                display: inline-block;
                background-color: #90EE90;
            }

            .tapActiveLi {
                background-color: #FF7F50;
            }

            div {
                border: 1px solid #f00;
            }

            .aTapWrap {
                border: none;
            }
        </style>

ps:这个没有阻止冒泡,话说要不要阻止?我也不知道。大神说看着烦,让我把冒泡删了,我再加一个版本吧。

js:

window.onload = function() {
                function For(c, d) {
                    function stopPropagation(e) {
                        e = e || window.event;
                        if(e.stopPropagation) { //W3C阻止冒泡方法
                            e.stopPropagation();
                        } else {
                            e.cancelBubble = true; //IE阻止冒泡方法
                        }
                    };
                    for(var i = 0; i < c.length; i++) {
                        c[i].index = i;
                        c[i].onclick = function(e) {
                            stopPropagation(e)
                            for(var j = 0; j < c.length; j++) {
                                c[j].className = "";
                                d[j].className = "hide";
                            }
                            this.className = "tapActiveLi";
                            d[this.index].className = "";
                        }
                    }
                }

                function tab(a, b) {
                    var aLi = document.getElementById(a).getElementsByTagName(‘li‘);
                    var aDiv = document.getElementById(b).getElementsByTagName(‘div‘);
                    For(aLi, aDiv)
                };
                tab(‘aTapHeadWrap‘, ‘aTapWrapS‘);
                tab(‘aTapHeadWrap2‘, ‘aTapWrapS2‘);
            }
时间: 2024-10-17 16:59:25

JS-【同页面多次调用】tab选项卡封装的相关文章

【技术】同页面可多次使用的jQuery tab选项卡代码

        <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>同页面可多次使用的jQuery tab选项卡代码</title><style type="text/css"> *{ margin:0; pad

js实现的tab选项卡功能

js实现的tab选项卡功能:选项卡功能在各种网站有各种形式的应用和,当时实现选项卡功能的方式也有多种多样,下面就简单介绍一下使用js实现选项卡功能的一种方式,在美观方面就不去精雕细刻了,只介绍js实现此功能的原理.代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http:/

原生js实现tab选项卡里内嵌图片滚动特效代码

<!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8"><title>原生js实现tab选项卡里内嵌图片滚动特效代码</title><meta name="keywords" content="原生js实现tab选项卡里内嵌图片滚动特效代码" /><meta name=&

原生JS画的tab选项卡

记录一下原生js写的tab选项卡 鼠标滑入可以切换图片 离开之后自动切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-

tytabs.jquery.min.js实例,渐变的TAB选项卡特效

<!DOCTYPE html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>唐山塑钢门窗</title><script type="text/javascript" src="/ajaxjs/jquery-1.6.2.min.js"><

javascript 一个页面多个tab选项卡效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>javascript 一个页面多个tab选项卡效果</title> <script> var tab=function(id,event){ var oDiv=document.getElementById(id); var oBtn=oDiv.getElementsByTagName(

jsp页面:js方法里嵌套java代码(是操作数据库的),如果这个js 方法没被调用,当jsp页面被解析的时候,不管这个js方法有没有被调用这段java代码都会被执行?

jsp页面:js方法里嵌套java代码(是操作数据库的),如果这个js 方法没被调用,当jsp页面被解析的时候,不管这个js方法有没有被调用这段java代码都会被执行? 因为在解析时最新解析的就是JAVA代码,不管写哪里,都会最新被解析

tab选项卡代码(原生js)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>tab选项卡一练习</title> <style> *{ margin: 0px; padding: 0px; } #tab{ width: 400px; height: 250px; margin: 20px auto; position: rel

mui在tab选项卡中echarts图表不能动态随页面变化大小 只能固定大小

在mui tab选项卡中一直都不能让echarts动态变化大小 只能固定大小来展示图表,网上说的window.onresize = mycharts.resize;方法根本就没有效果,后面在https://blog.csdn.net/dreamcarp/article/details/71439060博客才找到了解决方法,特意记录下来 浏览器有warning:cannot get height and width. 解决方法: //echarts-content是echarts图表div的id