JQ 最少代码实现title标签切换内容

最新推荐文章于 2025-08-18 13:10:39 发布

最新推荐文章于 2025-08-18 13:10:39 发布 · 300 阅读

文章标签：

#JQ最少代码实现 #title标签切换内容 #title切换内容

境-JS 专栏收录该内容

197 篇文章

订阅专栏

本文介绍了一种使用jQuery简化实现网页标题周期性自动切换的方法，提供了两种不同长度的代码示例，一种适用于三个以上标题的轮换，另一种适用于两个标题之间的交替显示。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>JQ 最少代码实现title标题切换内容</title>
<link rel="stylesheet" href="base.css" />
<script type="text/javascript" src="jquery-1.10.1.min.js" ></script>
</head>
<body>
<script>
$(function() {
	skipTitle();
});
function skipTitle(){
	var index = 0;
	var arr = ['☆☆★第一个标题★☆☆', '☆★☆第二个标题☆★☆', '★☆☆第三个标题☆☆★'];
	//初始化标题，可删除该条
	$(document).attr('title',arr[0]);
	setInterval(function(){
		//document.title = arr[index%arr.length];
		index++;
		$(document).attr('title',arr[index%arr.length]);
	}, 3000);
}
</script>
</body>
</html>

如果是两条内容切换，这个会更短

function skipTitle(){
	var index = 0;
	setInterval(function(){
		index%2==0?document.title='☆★第一个标题★☆':document.title='★☆第二个标题☆★';
		index++;
	}, 3000);
}

效果图：