点击选项卡后页面标题切换的实现

最新推荐文章于 2023-03-22 17:05:47 发布

原创最新推荐文章于 2023-03-22 17:05:47 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #HTML #Javascript #MUI #手机

页面基础编程专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种在网页中根据选项卡点击事件更改浏览器标题栏标题的方法。通过使用JavaScript，可以实现不同选项卡对应不同的标题显示，提高了用户体验，并提供了两种更改标题的具体实现方式以及一种特殊情况下的处理方法。

初始化

<header class="mui-bar mui-bar-nav own-main-background-color">
		<h1 id="nav-title" class="mui-title">首页</h1>
</header>
navtitle = document.getElementById('nav-title');

监听到选项卡点击事件后
1. 更换标题方法一：

var tabitem = this;
navtitle.innerText = tabitem.children[tabitem.children.length - 1].innerText;

2. 更换标题方法二：

navtitle.innerHTML = this.querySelector('.mui-tab-label').innerHTML;

3. 如果要更换的标题和选项卡文字不一致，可采用如下代码：

switch (this.querySelector('.mui-tab-label').innerHTML){
						case "车号":
							navtitle.innerHTML ="车号查询";
							break;
						case "计划号":
							navtitle.innerHTML ="计划号查询";
							break;
						case "我的":
							navtitle.innerHTML ="我的";
							break;	
					}