前端script怎么简写下拉框页面

<script>
    $(document).ready(function(){
        if (location.href.indexOf("aaa.html") > 0){
            $('#aaa').parent('ul').removeClasee(...);     # 重复1
            $('#aaa').parent('ul').addClass(...);             # 重复2
            $('#aaa').parent('ul').slideDown(100).chilldren('li');   # 重复3
            $('#aaa').addClass('active');                      # 重复4
            $('#aaa').attr(...);                                       # 重复5
        }
        else if (location.href.indexOf("bbb.html") > 0){
            $('#bbb')...             # 重复1
            $('#bbb')...             # 重复2
            $('#bbb')...             # 重复3
            ...                            # 重复4
                                          # 重复5
        }
        else if (){
        # 重复1,2,3,4,5
        }
        else if(location.href.indexOf("kkk.html") > 0 || location.href.indexOf("lll.html") > 0){
        # 重复1,2,3,4,5
        }
        .......
        }
</script>

我想简化上述代码，不想一直用if else大段大段的往后添加，想把这些大量的重复代码重构一下，但是不会前端，大佬们能告知下有什么方案么？非常感谢，最好写下demo，采纳给C币，感谢感谢！！

现在我单写了函数，然后调用。现在有个问题，下拉页面只能点一次就不能再点了，不知道哪的问题？

<script>
    $(document).ready(function(){

        function dolt(value){
            $('#'+value)...    # 重复1
            $('#'+value)...    # 重复2
            $('#'+value)...    # 重复3
            $('#'+value)...    # 重复4
            $('#'+value)...    # 重复5
            }

        if (location.href.indexOf("aaa.html") > 0){
            dolt(aaa);
            }
        else if  (location.href.indexOf("bbb.html") > 0){
            dolt(aaa);
            }
            ...
    });
</script>

可以用遍历的方法，但是ready你要确保你的项目在跳连接的时候是重新加载dom的，像vue搭建的项目估计要刷新才会加载ready哦

var hrefArr = ['aaa.html', 'bbb.html', 'ccc.html'];
    $(document).ready(function () {
        hrefArr.forEach((href, i) => {
            if (location.href.indexOf(href)) {
                // jq 可以链式调用，不需要一句一句的写
                 // 你的jquery代码
                return
            }
        })
    });

直接在对应的 html 页面上，各自写各自的就可以了呀。
为什么要都要放在一起写呢？当前访问的是谁，谁的 ready 事件就加载各自的下拉框配置。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="jquery-1.11.0.js" ></script>
    </head>
    <body>
        <p id="aaa">我最帅</p>
        <script>
        $(document).ready(function(){
            var url = window.location.pathname;
             url = url.substring(url.lastIndexOf('/') + 1, url.lastIndexOf('.'));
            doIt(url);

      });
      function doIt(value){
        console.log(value);
          $('#'+value).css("color","red");                                # 重复5
      }
</script>
    </body>
</html>

这是我自己的理解。但是呢，我想，切换了不同的HTML页面怎么公用一套js呢。这种操作我还是没有见过。
最终把js抽象出来成一个文件，每个html页面都引用这个文件就好了，就没必要搞那么复杂了

你好,写一个页面的下拉框 js 独立出来, 每个页面的下拉框 html 都一样, 每个也都引入这个js文件就好了啊

个人观点，你要整合那些代码的话，你的重复1 2 3 4 5可以也到一个函数里面，然后传入的参数就是 aaa bbb之类。最后用switch进行选择。这样代码或许会好一些。