前端引入公用模块代码

川长思鸟来 2022-12-15 02:21 125阅读 0赞

### 写网页通常会遇到要公用一个头部区域，底部区域或其他区域。我们以公用头部header为例演示。 ###

### 1.共用头部header.js ###

document.writeln(` // html写在此处
            <ul class="navbar-nav" style="font-size:28px">
    			<li class="nav-item">
    				<div class="dropdown">
    					<button onmouseover="myFunction()" class="dropbtn">解决方案</button>
    					<div id="myDropdown" class="dropdown-content">
    						<a href="solution1.html">解决方案1</a>
    						<a href="solution2.html">解决方案2</a>
    					</div>
    				</div>
    			</li>
    		</ul>
    	`)
    	/* js内容正常放置此处 */
    	function myFunction() {
    		console.log(123)
    		document.getElementById("myDropdown").classList.toggle("show");
    	}
    
    	// 点击下拉菜单意外区域隐藏
    	window.onclick = function(event) {
    		if (!event.target.matches('.dropbtn')) {
    
    			var dropdowns = document.getElementsByClassName("dropdown-content");
    			var i;
    			for (i = 0; i < dropdowns.length; i++) {
    				var openDropdown = dropdowns[i];
    				if (openDropdown.classList.contains('show')) {
    					openDropdown.classList.remove('show');
    				}
    			}
    		}
    	}

### 2.需要引入公用代码的页面中引入 ###

// head中引入公用头部所需的css	
    <link type="text/css" rel="stylesheet" href="./css/header.css">
    
    // body 区域引入 header.js 
    <script src="./js/top.js">

发表评论取消回复

表情：

评论列表（有 0 条评论，125人围观）

还没有评论，来说两句吧...

相关阅读

相关 python 之模块引入

模块引入： 1.同级引入　　如 ac\_first.py 引入ac\_second.py：只需直接 import ac\_second 即可　　这种情况

朴灿烈づ我的快乐病毒、/ 2023年08月17日 17:15/ 0 赞/ 142 阅读

相关前端全局公用脱敏处理方法

//全局公用的对数据脱敏处理方法参数可以是单个也可以是多个，但是格式必须是字符串 function publicDesensitization(){

忘是亡心i/ 2023年08月17日 16:24/ 0 赞/ 135 阅读

相关微信小程序引入公用css及js

环境：微信小程序首先看一下官方资料：引入css：[https://developers.weixin.qq.com/miniprogram/dev/fram

Myth丶恋晨/ 2023年07月05日 14:41/ 0 赞/ 5 阅读

相关引入指令或引入模块（实用，备忘）

【前提】假设已有一个指令bg-color 和一个包含多个指令的模块directives.module ![20191122165204619.png]

曾经终败给现在/ 2023年06月15日 13:26/ 0 赞/ 126 阅读

相关前端引入公用模块代码

写网页通常会遇到要公用一个头部区域，底部区域或其他区域。我们以公用头部header为例演示。 1.共用头部header.js document.writel

川长思鸟来/ 2022年12月15日 02:21/ 0 赞/ 126 阅读

相关 web前端引入vConsole

这个厉害 [https://www.cnblogs.com/zhangruiqi/p/9509934.html][https_www.cnblogs.com_zhangruiq

素颜马尾好姑娘i/ 2022年12月14日 12:19/ 0 赞/ 156 阅读

相关 python中模块引入

模块引入 1、当前路径下模块引入步骤：（1）需要引入的模块文件（bb.py文件)和执行的程序文件（aa.py文件)放在一个目录下。（2）在执行程序（aa.py文件

喜欢ヅ旅行/ 2022年05月30日 23:42/ 0 赞/ 271 阅读

相关 16、webpack代码分离--防止公用代码的重复导入

防止重复(prevent duplication) webpack 官网文档里建议使用CommonsChunkPlugin 插件可以将公共的依赖模块提取到已有的入口 chun

电玩女神/ 2022年01月15日 11:21/ 0 赞/ 219 阅读

相关操作Cookie公用代码

![None.gif][] \region关于操作Cookie的方法 ![None.gif][] ![ExpandedBlockStart.gif][None.gif]

冷不防/ 2021年12月20日 22:19/ 0 赞/ 264 阅读

相关 wx小程序——抽离公用方法进行模块化

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

清疚/ 2021年07月26日 01:13/ 0 赞/ 350 阅读