HTML中<Javascript>与activity之间的交互

本文介绍如何在Android应用中通过HTML布局实现动态页面加载,并通过JavaScript接口与自定义活动类进行交互,实现场景如播放音乐、启动HTTP网页等功能,提升用户体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

在android中有时用到HTML所写的文件布局时,为了使其产生交互,因此在HTML中定义<script>使其达到交互的效果

首先利用web布局在xml中定义webview控件:

<span style="font-size:14px;"><WebView android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/webview_one"/></span>

在activity中引入:

<span style="font-size:14px;"><span style="white-space:pre">		</span>mWebView = (WebView) findViewById(R.id.webview_one);
		//第一步,设置webview可操作
		WebSettings webSettings = mWebView.getSettings();
		webSettings.setJavaScriptEnabled(true);
		//第三步,添加Javascript接口
		mWebView.addJavascriptInterface(new MyWebView(), "musicServiceInterfaceName");  //<span style="font-family: Arial, Helvetica, sans-serif;">musicServiceInterfaceName与<script>中window点后保持一致</span>

		 
		mWebView.loadUrl(url);    //String url = "http://192.168.1.132:8080/test/getmarry.html";  自定义HTML路径
	}
	
	/* 第二步
	 * 自定义一个activity与HTML交互类“musicServiceInterfaceName”和所使用方法
	 * */
	public class MyWebView{
		/*
		 * 界面交互,此方法与HTML中调用方法保持一致
		 * */
		public void playMusic(){
			Toast.makeText(MyWebViewActivity.this, "播放成功", Toast.LENGTH_SHORT).show();
		}
		
		/*
		 * 界面交互,此方法与HTML中调用方法保持一致
		 * */
		public void startGridViewHttp(){
			startActivity(new Intent(MyWebViewActivity.this, TestRelative.class));
		}
	}</span>

HTML中文件:下面在<head>标签下

<span style="font-size:14px;"><script>
		
		
		function myOnClick(){             //定义调用方法
			
			window.musicServiceInterfaceName.playMusic();      //<span style="font-family: Arial, Helvetica, sans-serif;">playMusic()为activity中调用方法(下面相同)</span>

		}
		function startGridView(){
			window.musicServiceInterfaceName.startGridViewHttp();
		}
		
		
		function nativeToJs(){
			var url = window.musicServiceInterfaceName.jsToNativeGetParameter(); //返回http://it.warmtel.com 
			window.location.href=url; //跳转到指定url
		}

		
		function toHttpWeb(){
			window.location.href="http://blog.warmtel.com";
		}
		
	</script></span>
在<body>标签中:

<span style="font-size:14px;"><div class="wrapcontain" style="width: 300px;padding: 10px;padding-top: 0px;margin: 0 auto;background-color:#680011;">

			<div class="topimg" >
				<img class="p2" src="./img/index_top_bg.png"/>
				<img class="p1" src="./img/index_microphone.png" οnclick="myOnClick()"/>     <span style="font-family: Arial, Helvetica, sans-serif;"><!-- 设置点击事件    当点击时调用activity中playMusic方法--></span>

			
				<h3 class="sp">
					<p id="sp11" class="sp1">xxx</p>
					<p class="sp2">
						还有<span class="sp3">35</span>天
					</p>
				</h3>
			</div>
		
			<div class="imgshow">
				<img src="./img/index_yaoqinghan.png" οnclick="startGridView()"/>   <!-- 设置点击事件 -->
			<img src="./img/index_zhufuqiang.png" /> 
			<img src="./img/index_yaoyiyao.png" /> 
			<img src="./img/index_hunsha.png" />

			</div>
			
			<p class="footer">
			<a href="###">xxx<img
				src="./img/redRightarrow.png" /></a>

			</p>
			
		</div></span>





<!-- 导航栏 --> <div class="nav"> <ul> <li class="menu">首页 <ul class="subMenu"> <li><a href="https://www.csgo.com.cn/main.html">游戏官网</a></li> <li><a href="https://www.pwesports.cn/association">高校电竞社</a></li> <li><a href="https://csgo.wanmei.com/communityserver">社区中心</a></li> </ul> </li> <li class="menu"><a href="#">充值</a></li> <li class="menu">新闻 <ul class="subMenu"> <li><a href="https://www.csgo.com.cn/activity/index.html">活动中心</a></li> <li><a href="https://www.csgo.com.cn/match">赛事中心</a></li> <li><a href="https://www.csgo.com.cn/news/index.html">新闻中心</a></li> </ul> </li> <li class="menu"><a href="#">赛事</a></li> <li class="menu">资料 <ul class="subMenu"> <li><a href="https://www.csgo.com.cn/hd/1704/newerguide/index.html">新手指南</a></li> <li><a href="https://www.csgo.com.cn/hd/1610/info/index.html">官方资料站</a></li> <li><a href="https://www.csgo.com.cn/show">游戏特色</a></li> </ul> </li> <li class="menu"><a href="//wmsjdj.tmall.com/category-1465876517.htm">商城</a></li> <li class="menu">服务 <ul class="subMenu"> <li><a href="https://www.csgo.com.cn/faq/index.html">常见问题</a></li> <li><a href="javascript:void(0);">客服支持</a></li> <li><a href="#">礼包码兑换</a></li> </ul> </li> <li class="menu">注册 <ul class="subMenu"> <li><a href="#">游戏下载</a></li> <li><a href="#">账户注册</a></li> </ul> </li> </ul> </div> 给出css,js文件实现二级菜单
最新发布
06-16
<think>我们有一个导航栏的HTML结构,现在需要实现二级菜单的显示和隐藏效果。要求:1.默认情况下,二级菜单(subMenu)是隐藏的。2.当鼠标移动到一级菜单(menu)上时,显示该菜单下的二级菜单;鼠标移出时,二级菜单隐藏。我们将使用CSS和JavaScript来实现。但为了更好的用户体验,我们可以先尝试用纯CSS实现,如果不行再考虑使用JavaScript。分析HTML结构:每个一级菜单项(li.menu)内部包含一个二级菜单(ul.subMenu),我们需要对.subMenu进行样式设置和交互控制。纯CSS方案:我们可以使用CSS的:hover伪类来控制二级菜单的显示和隐藏。但是注意,二级菜单的隐藏和显示需要在一级菜单悬停时触发。步骤:1.设置.subMenu的display为none,将其隐藏。2.当鼠标悬停在一级菜单(li.menu)上时,将其下的.subMenu设置为display:block(或者使用其他显示方式,比如flex)。但是,由于一级菜单中有些是直接链接(比如“充值”、“赛事”),它们没有二级菜单,所以我们需要确保只有包含二级菜单的一级菜单才应用悬停效果。然而,观察HTML结构,只有有二级菜单的li元素才具有class="menu",并且内部有ul.subMenu。没有二级菜单的li虽然也有class="menu",但是内部没有ul.subMenu,所以不会出现空的二级菜单。因此,我们可以这样写CSS:但是,这里有一个问题:一级菜单中的“充值”、“赛事”没有二级菜单,但是它们仍然有class="menu",所以当鼠标悬停在它们上面时,不会触发二级菜单(因为内部没有.subMenu),所以不会有问题。另外,我们需要考虑二级菜单的定位:应该使用绝对定位,这样不会影响其他元素的布局。具体CSS实现:1.一级菜单项(.menu)设置为相对定位(position:relative),这样二级菜单可以相对于它定位。2.二级菜单(.subMenu)设置为绝对定位(position:absolute),并设置top为100%(即在一级菜单的下方),left为0(或者根据需要调整)。3.设置.subMenu的display为none,然后在.menu:hover.subMenu时设置为display:block(或者flex,根据布局需要)。但是,为了有更好的过渡效果,我们可以考虑使用visibility和opacity属性,并配合transition实现淡入淡出。不过,根据要求,我们先实现基本显示隐藏。另外,我们还需要考虑整体导航栏的样式,比如水平排列、背景色等。由于题目只要求实现二级菜单,我们主要关注这部分。但是,注意:如果使用纯CSS,当鼠标移出一级菜单时,二级菜单会立即消失,这样如果用户想从一级菜单移动到二级菜单,可能会因为中间的空隙而消失。所以我们需要让二级菜单紧贴着一级菜单,并且二级菜单的显示区域可以包含在一级菜单的悬停范围内?实际上,我们通常会让二级菜单和一级菜单之间没有间隙,或者通过设置一级菜单的padding-bottom来增加悬停区域。不过,在纯CSS中,我们可以通过设置一级菜单(包括二级菜单)的整个区域作为悬停区域。但是,二级菜单是绝对定位,它已经脱离文档流,所以一级菜单的高度并不会被二级菜单撑开。因此,我们可以在.menu:hover的时候显示二级菜单,并且二级菜单紧贴着一级菜单底部(top:100%),这样当鼠标从一级菜单移动到二级菜单时,由于二级菜单就在一级菜单的正下方,所以不会触发一级菜单的mouseout(因为二级菜单属于一级菜单的子元素,鼠标仍在父元素内)。所以,纯CSS方案是可行的。但是,为了确保万无一失,我们可以使用JavaScript来增强:当鼠标移入一级菜单时,显示二级菜单;当鼠标移出一级菜单时,延迟隐藏二级菜单(以防止用户不小心移出)。不过,题目没有要求,我们先按照纯CSS实现。下面给出CSS代码,并添加一些基本样式使导航栏看起来更美观。另外,注意:原HTML中,有些一级菜单是纯文本(如“首页”),有些是链接(如“充值”)。我们需要统一一下样式。我们为导航栏整体设置样式,比如背景色、水平排列等。开始编写CSS:注意:原HTML中,一级菜单项(li.menu)是浮动排列,我们可以使用flex布局来更现代地实现。由于原HTML中导航栏的类为.nav,我们基于这个类来写样式。我们重新设计一下样式,使其为水平导航栏,并具有二级菜单。考虑到兼容性,我们使用flex布局,并设置一级菜单项水平排列。具体步骤:1.设置.navul(即最外层的ul)为flex布局,并去除默认的列表样式。2.设置一级菜单项(.nav>ul>li)的样式,比如水平排列,设置相对定位。3.设置一级菜单项内的链接(a标签)的样式,比如块级显示,内边距等。4.设置二级菜单(.subMenu)的样式:绝对定位,隐藏,宽度等。5.设置鼠标悬停时显示二级菜单。但是,原HTML中,一级菜单项有些有子菜单,有些没有。对于没有子菜单的,我们不需要显示下拉箭头等,这里我们就不加箭头了。另外,为了美观,我们给二级菜单加背景色、阴影等。我们开始写CSS:由于题目没有提供具体的颜色和尺寸,我们使用通用样式。最后,我们也可以使用JavaScript来增强,比如在鼠标移出整个菜单容器时隐藏二级菜单,但这里我们先用纯CSS。但是,如果用户使用触摸屏设备,纯CSS的:hover可能不够,但题目没有要求,我们先不考虑。下面给出CSS代码:注意:原HTML中,二级菜单的li里面是a标签,所以我们要设置二级菜单内的链接样式。另外,我们使用display:none来隐藏,display:block(或flex)来显示。由于二级菜单是垂直排列,我们设置.subMenu为flex-direction:column。但是,为了简单,我们直接使用block,然后二级菜单内的li会垂直排列。开始写代码:</think>我将为您实现一个带有二级菜单的导航栏,使用纯CSS实现悬停显示效果。以下是完整的HTML、CSS和JavaScript代码实现: ```html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>导航栏 - 二级菜单实现</title> <style> /* 重置样式 */ * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Microsoft YaHei', sans-serif; } /* 导航栏容器 */ .nav { background-color: #1a1a1a; height: 60px; display: flex; justify-content: center; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5); } /* 一级菜单样式 */ .nav > ul { display: flex; list-style: none; height: 100%; } .nav > ul > li.menu { position: relative; } .nav > ul > li.menu > a { color: #fff; text-decoration: none; padding: 0 20px; height: 60px; display: flex; align-items: center; font-size: 16px; transition: all 0.3s ease; } .nav > ul > li.menu > a:hover { background-color: #333; color: #ffd700; } /* 二级菜单样式 */ .subMenu { position: absolute; top: 100%; left: 0; background-color: #333; list-style: none; min-width: 200px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.3s ease; z-index: 1000; } .subMenu li a { color: #ddd; text-decoration: none; padding: 12px 20px; display: block; font-size: 14px; transition: all 0.2s ease; } .subMenu li a:hover { background-color: #444; color: #ffd700; padding-left: 25px; } /* 悬停时显示二级菜单 */ .menu:hover .subMenu { opacity: 1; visibility: visible; transform: translateY(0); } /* 指示箭头 */ .menu:has(.subMenu) > a::after { content: "▼"; font-size: 10px; margin-left: 5px; display: inline-block; transition: transform 0.3s ease; } .menu:hover > a::after { transform: rotate(180deg); } </style> </head> <body> <!-- 导航栏结构 --> <div class="nav"> <ul> <li class="menu">首页 <ul class="subMenu"> <li><a href="https://www.csgo.com.cn/main.html">游戏官网</a></li> <li><a href="https://www.pwesports.cn/association">高校电竞社</a></li> <li><a href="https://csgo.wanmei.com/communityserver">社区中心</a></li> </ul> </li> <li class="menu"><a href="#">充值</a></li> <li class="menu">新闻 <ul class="subMenu"> <li><a href="https://www.csgo.com.cn/activity/index.html">活动中心</a></li> <li><a href="https://www.csgo.com.cn/match">赛事中心</a></li> <li><a href="https://www.csgo.com.cn/news/index.html">新闻中心</a></li> </ul> </li> <li class="menu"><a href="#">赛事</a></li> <li class="menu">资料 <ul class="subMenu"> <li><a href="https://www.csgo.com.cn/hd/1704/newerguide/index.html">新手指南</a></li> <li><a href="https://www.csgo.com.cn/hd/1610/info/index.html">官方资料站</a></li> <li><a href="https://www.csgo.com.cn/show">游戏特色</a></li> </ul> </li> <li class="menu"><a href="//wmsjdj.tmall.com/category-1465876517.htm">商城</a></li> <li class="menu">服务 <ul class="subMenu"> <li><a href="https://www.csgo.com.cn/faq/index.html">常见问题</a></li> <li><a href="javascript:void(0);">客服支持</a></li> <li><a href="#">礼包码兑换</a></li> </ul> </li> <li class="menu">注册 <ul class="subMenu"> <li><a href="#">游戏下载</a></li> <li><a href="#">账户注册</a></li> </ul> </li> </ul> </div> <script> // 添加移动设备触摸支持 document.addEventListener('DOMContentLoaded', function() { const menus = document.querySelectorAll('.menu'); // 为有二级菜单的项添加触摸事件 menus.forEach(menu => { if (menu.querySelector('.subMenu')) { menu.addEventListener('click', function(e) { // 在移动设备上切换二级菜单 if (window.innerWidth <= 768) { e.preventDefault(); const subMenu = this.querySelector('.subMenu'); const isVisible = subMenu.style.display === 'block'; // 关闭所有其他二级菜单 document.querySelectorAll('.subMenu').forEach(sm => { sm.style.display = 'none'; }); // 切换当前二级菜单 subMenu.style.display = isVisible ? 'none' : 'block'; } }); } }); // 点击页面其他区域关闭二级菜单 document.addEventListener('click', function(e) { if (!e.target.closest('.menu')) { document.querySelectorAll('.subMenu').forEach(subMenu => { subMenu.style.display = 'none'; }); } }); }); // 响应式设计:在小屏幕设备上调整样式 window.addEventListener('resize', function() { const subMenus = document.querySelectorAll('.subMenu'); if (window.innerWidth > 768) { // 在大屏幕上使用CSS悬停效果 subMenus.forEach(sm => { sm.style.display = ''; }); } else { // 在小屏幕上默认隐藏二级菜单 subMenus.forEach(sm => { sm.style.display = 'none'; }); } }); </script> </body> </html> ``` ### 代码解释: #### CSS部分: 1. **导航栏容器**:使用深色背景,固定高度,flex布局居中 2. **一级菜单**: - 相对定位(为二级菜单定位做准备) - 悬停效果:背景变暗,文字变为金色 3. **二级菜单**: - 绝对定位在父菜单下方 - 初始状态:透明、不可见、下移10px - 悬停时:完全显示,平滑上移 - 悬停指示器:使用CSS伪元素添加向下箭头 4. **过渡动画**: - 所有状态变化使用0.3秒的过渡效果 - 二级菜单使用opacity和transform实现淡入淡出效果 #### JavaScript部分: 1. **移动设备支持**: - 为有二级菜单的项添加点击事件 - 点击时切换二级菜单显示状态 2. **响应式设计**: - 窗口大小改变时检测屏幕宽度 - 小屏幕设备上默认隐藏二级菜单 - 大屏幕设备上恢复CSS控制的悬停效果 3. **点击外部关闭**: - 点击页面其他区域时关闭所有二级菜单 ### 主要特点: 1. **纯CSS悬停效果**:使用`:hover`伪类实现二级菜单显示 2. **平滑动画**:使用CSS transition实现淡入淡出效果 3. **响应式设计**:自动适配桌面和移动设备 4. **视觉指示器**:有二级菜单的项显示下拉箭头 5. **优雅的交互**:二级菜单有阴影和悬停效果
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值