扶苏a 2023-11-01 16:23 采纳率: 0%
浏览 6

外链式引入js不报错 模块化引入时发现类型错误

使用外链式引入js文件时

img

页面正常加载并且不会报错

img

但是当我使用模块化引入时

img

控制台报错

img

然后发现时这行代码

img

希望有哥们可以帮忙解决一下

  • 写回答

3条回答 默认 最新

  • 扶苏a 2023-11-01 16:49
    关注

    img

    加了new之后也是报错
    贴一下代码

    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
        }
        .header{
            display: flex;
            width:500px;
        }
        .header li{
            flex: 1;
            height: 50px;
            line-height: 50px;
            text-align: center;
            border: 1px solid black;

        }
        .box{
            position: relative;
            height: 400px;
            width: 400px;
        }
        .box li{
            position: absolute;
            left: 0;
            top: 0;
            width: 400px;
            height: 400px;
            background-color: aqua;
            display: none;
        }

        .header .active{
            background-color: red;
        }
        .box .active{
            display: block;
        }
    </style>
</head>
<body>
    
   <div class="container1">
     <ul class="header">
            <li class="active">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
  
        <ul class="box">
            <li class="active"><img src="https://upload.wikimedia.org/wikipedia/zh/f/f2/The_Battle_at_Lake_Changjin_poster.jpg" alt=""></li>
            <li><img src="    https://upload.wikimedia.org/wikipedia/zh/7/79/The_Founding_of_a_Party.jpg" alt=""></li>
            <li><img src="    https://upload.wikimedia.org/wikipedia/zh/3/3e/%E5%88%86%E6%89%8B%E5%A4%A7%E5%B8%88.jpg" alt=""></li>
            <li>无图片</li>
        </ul>
   </div>
   <div class="container2">
    <ul class="header">
           <li class="active">1</li>
           <li>2</li>
           <li>3</li>
           <li>4</li>
       </ul>
 
       <ul class="box">
           <li class="active"><img src="https://upload.wikimedia.org/wikipedia/zh/f/f2/The_Battle_at_Lake_Changjin_poster.jpg" alt=""></li>
           <li><img src="    https://upload.wikimedia.org/wikipedia/zh/7/79/The_Founding_of_a_Party.jpg" alt=""></li>
           <li><img src="    https://upload.wikimedia.org/wikipedia/zh/3/3e/%E5%88%86%E6%89%8B%E5%A4%A7%E5%B8%88.jpg" alt=""></li>
           <li>无图片</li>
       </ul>
  </div>
       
  

   
    <!-- <script src="./js/tab.js"></script>
    <script>
          new Tabs('.container1','click')
            new Tabs('.container2','mouseover')
    </script>
     -->
     <script type="module">
        import mytab from './js/tab.js'
          new mytab('.contioner1','click')
          new mytab('.contioner2','mouseover')
         //tab1.change()
      
      </script>
</body>
</html>

    function Tabs(select,type){
    var container = document.querySelector(select)
     this.oHeaderItems = container.querySelectorAll('.header li')
    this.oBoxItems = container.querySelectorAll('.box li')
    this.type = type
    this.change()
   }


   
   Tabs.prototype.change = function(){
    for (let i = 0; i < this.oHeaderItems.length; i++) {
        
        this.oHeaderItems[i].addEventListener(this.type,()=>{
            var index = i
            for (var m = 0; m < this.oHeaderItems.length; m++) {
                    this.oHeaderItems[m].classList.remove('active')
                    this.oBoxItems[m].classList.remove('active')             
                
            }
            this.oHeaderItems[index].classList.add('active')
            this.oBoxItems[index].classList.add('active')
        })
    }
   }
   export default Tabs
    评论 编辑记录

报告相同问题？

问题事件

  • 创建了问题 11月1日

悬赏问题

  • ¥15 急matlab编程仿真二阶震荡系统
  • ¥20 TEC-9的数据通路实验
  • ¥15 ue5 .3之前好好的现在只要是激活关卡就会崩溃
  • ¥50 MATLAB实现圆柱体容器内球形颗粒堆积
  • ¥15 python如何将动态的多个子列表，拼接后进行集合的交集
  • ¥20 vitis-ai量化基于pytorch框架下的yolov5模型
  • ¥15 如何实现H5在QQ平台上的二次分享卡片效果？
  • ¥15 python爬取bilibili校园招聘网站
  • ¥30 求解达问题（有红包）
  • ¥15 请解包一个pak文件