js小白提问，网页项目中，要是写大量js，应该如何放？

1，是否是每个效果都用function 函数名包起来，然后在window.onload中一一调用？像下面例子这样可以么？

2，假如同一个页面中，相同的两个效果同时调用，无效了，应该怎么写？请问是否这是重载的原因？应该如何解决。

比如

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>无标题文档</title>
    <style>
    body,
    ul,
    li {
        margin: 0;
        padding: 0;
        font: 12px/1.5 arial;
    }

    ul,
    li {
        list-style: none;
    }

    .wrap {
        width: 500px;
        margin: 20px auto;
    }

    .hide {
        display: none;
    }

    #tab_t {
        height: 25px;
        border-bottom: 1px solid #ccc;
    }

    #tab_t li {
        float: left;
        width: 80px;
        height: 24px;
        line-height: 24px;
        margin: 0 4px;
        text-align: center;
        border: 1px solid #ccc;
        border-bottom: none;
        background: #f5f5f5;
        cursor: pointer
    }

    #tab_t .act {
        position: relative;
        height: 25px;
        margin-bottom: -1px;
        background: #fff;
    }

    #tab_c {
        border: 1px solid #ccc;
        border-top: none;
        padding: 20px;
    }




     #tab_t1 {
        height: 25px;
        border-bottom: 1px solid #ccc;
    }

    #tab_t1 li {
        float: left;
        width: 80px;
        height: 24px;
        line-height: 24px;
        margin: 0 4px;
        text-align: center;
        border: 1px solid #ccc;
        border-bottom: none;
        background: #f5f5f5;
        cursor: pointer
    }

    #tab_t1 .act {
        position: relative;
        height: 25px;
        margin-bottom: -1px;
        background: #fff;
    }

    #tab_c1 {
        border: 1px solid #ccc;
        border-top: none;
        padding: 20px;
    }
    </style>



    <script>
    window.onload = function()
     { 
        rec1();
        rec2();
     }

      function rec1(){
          var tab_t = document.getElementById("tab_t"); 
        var tab_t_li = tab_t.getElementsByTagName("li"); 
        var tab_c = document.getElementById("tab_c"); 
        var tab_c_li = tab_c.getElementsByTagName("div");
         var len = tab_t_li.length; 
         var i = 0; 
         for (i = 0; i < len; i++) 
             { 
                 tab_t_li[i].index = i;
                tab_t_li[i].onclick = function()
                     { 
                         for (i = 0; i < len; i++) 
                             { 
                                 
                                 tab_t_li[i].className = '';
                                  tab_c_li[i].className = 'hide'

                               }

                                tab_t_li[this.index].className = 'act';
                                  tab_c_li[this.index].className = ''; 
                       }
                   }
      }



        function rec2(){
          var tab_t1 = document.getElementById("tab_t1"); 
        var tab_t1_li = tab_t1.getElementsByTagName("li"); 
        var tab_c1 = document.getElementById("tab_c1"); 
        var tab_c1_li = tab_c1.getElementsByTagName("div");
         var leng = tab_t1_li.length; 
         var i = 0; 
         for (i = 0; i < leng; i++) 
             { 
                 tab_t1_li[i].index = i;
                tab_t1_li[i].onclick = function()
                     { 
                         for (i = 0; i < leng; i++) 
                             { 
                                 
                                 tab_t1_li[i].className = '';
                                  tab_c1_li[i].className = 'hide'

                               }

                                tab_t1_li[this.index].className = 'act';
                                  tab_c1_li[this.index].className = ''; 
                       }
                   }
      }
    </script>
</head>

<body>
    <div class="wrap">
        <ul id="tab_t">
            <li class="act">选择1</li>
            <li>选择2</li>
            <li>选择3</li>
            <li>选择4</li>
        </ul>
        <div id="tab_c">
            <div>内容1</div>
            <div class="hide">内容2</div>
            <div class="hide">内容3</div>
            <div class="hide">内容4</div>
        </div>
    </div>

    <div class="wrap">
        <ul id="tab_t1">
            <li class="act">选择1</li>
            <li>选择2</li>
            <li>选择3</li>
            <li>选择4</li>
        </ul>
        <div id="tab_c1">
            <div>内容1</div>
            <div class="hide">内容2</div>
            <div class="hide">内容3</div>
            <div class="hide">内容4</div>
        </div>
    </div>
</body>

</html>

提问之前查了百度，提问了其他平台，有大神说建议看3大框架的源码，然而我不好意思说，我真是一窍不通。

jquery javascript

阅读 3.1k

4 个回答

Grocker

✓ 已被采纳

单独写成一个js，然后在HTML中引入

<script src="xxx.js"></script>

1:如果在页面中复用的地方，就写成`function`，引入后调用。`window.onload`的意思是在页面加载完后调用里面的方法，不用的话就是从上至下按顺序加载。
2：相同的效果封装成`function`在不同的地方调用就行了

李十三

13.6k31929

发布于
2017-08-25

你这js写的两个方法可以合到一块写成一个方法两层for循环你用了同一个i

window.onload = function () {
    var wraps = docuemnt.getElementsByClassName("wrap");
    for(var i=0;i<wraps.length;i++){
        rec(wraps[i]);
    }
}

function rec(wrap) {//把两个warp里的clss起一样
    var tab_t = wrap.getElementsByClassName("tab_t");
    var tab_t_li = tab_t.getElementsByClassName("li");
    var tab_c = wrap.getElementsByClassName("tab_c");
    var tab_c_div = tab_c.getElementsByTagName("div");
    for (var i = 0; i < tab_t_li.length; i++) {
        tab_t_li[i].index = i;
        tab_t_li.onclick = function () {
            for (var j = 0; j < tab_t_li.length; j++) {
                tab_t_li[j].className = '';
                tab_c_div[j].className = 'hide';
            }
            tab_t_li[this.index].className = 'act';
            tab_c_div[this.index].className = '';
        }
    }
}

看你的代码，你是要做选项卡效果，然后可以复用。封装成一个插件然后引入，

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>无标题文档</title>
    <style>
        body,  ul, li,div { margin: 0;  padding: 0; font: 12px/1.5 arial;  }
        li {  list-style: none; }
        .wrap{width:600px;margin: 20px auto;padding-top: 20px}
        ul{width:100%; height: 40px; overflow: hidden}
        ul li{
            background-color: #00ccff;
            float: left;
            padding: 5px 15px;
            margin-right: 10px;
            cursor: pointer;
        }
        ul li.act{background-color: #dfb5ff
        }
        #tab_c{
            height: 200px;
            overflow: hidden;
        }
        #tab_c > div,#tab_c1 > div{
            display: none;
            width: 100%;
            height: 200px;
            float: left;
            background-color: #cccccc;
        }
        #tab_c > div.act, #tab_c1 > div.act{display: block}
    </style>
</head>

<body>
<div class="wrap">
    <ul id="tab_t">
        <li>选择1</li>
        <li>选择2</li>
        <li>选择3</li>
        <li>选择4</li>
    </ul>
    <div id="tab_c">
        <div>内容1</div>
        <div>内容2</div>
        <div>内容3</div>
        <div>内容4</div>
    </div>
</div>

<div class="wrap">
    <ul id="tab_t1">
        <li>选择1</li>
        <li>选择2</li>
        <li>选择3</li>
        <li>选择4</li>
    </ul>
    <div id="tab_c1">
        <div>内容1</div>
        <div>内容2</div>
        <div>内容3</div>
        <div>内容4</div>
    </div>
</div>
 <script>
    window.onload = function () {
        var nav = document.getElementById("tab_t"),
            con = document.getElementById("tab_c");
        tabs(nav,con,"act");

        var nav1 = document.getElementById("tab_t1"),
            con1 = document.getElementById("tab_c1");
        tabs(nav1,con1,"act");
    }
    /*参数说明
    *  nav 导航栏
    *  con  内容区
    *  act  当前状态的className
    * */
   function tabs(nav,con,act) {
        var navLi = nav.querySelectorAll("li"),
            conDiv = con.querySelectorAll("div"),
            length = navLi.length,//导航栏的长度
            index =0;
        /*默认显示第一个*/
       navLi[0].className=act;
       conDiv[0].className=act;

       for (var i=0;i<length;i++){
           navLi[i].index = i;//当前导航栏的index属性等于它的下标
           navLi[i].onclick = function () {
               navLi[index].className = "";//上一个的 导航栏去掉当前class
               conDiv[index].className = "";//上一个显示的 内容 变为隐藏
               this.className=act;// 点击的导航栏加上当前class
               conDiv[this.index].className=act; //点击的导航对应的内容显示
               index=this.index;//把index 变为当前导航的索引，以便于下次点击的时候作为上一个的依据
           }
       }
    }
</script>
</body>

</html>

若要加点特效如基于swiper的Tab选项卡
在页面底部引入

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/Swiper/3.4.2/js/swiper.jquery.min.js"></script>
<script src="js/swiperTab.js"></script>
<script>
 
    $(function () {
        $('.swiperTab > li').eq(0).addClass('active');
        //swiperTab 是你导航的className,active是你当前状态的className
        tabs('.swiperTab > li','.swiper-container','active');
    });
</script>

查看全部 4 个回答

被 1 篇内容引用

怎么样使用js对内容进行筛选？

推荐问题

js小白提问，网页项目中，要是写大量js，应该如何放？

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

为什么在 JavaScript 中直接调用和用逻辑与调用方法结果不同？

什么是闭包？闭包有哪些应用场景？