分享原生javaScript实现的楼层导航功能

最新推荐文章于 2024-04-10 15:12:17 发布

cocotsau

最新推荐文章于 2024-04-10 15:12:17 发布

阅读量5k

点赞数

分类专栏： javaScript 文章标签： html javascript 导航

本文链接：https://blog.youkuaiyun.com/perhapschen/article/details/51045452

版权

本文分享了如何利用原生JavaScript实现楼层导航功能，详细介绍了实现过程和效果展示，为网页交互增加便利。

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

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
*{margin:0; padding:0;}
ul,ol{list-style:none;}
img {border:none;}
a {text-decoration:none;}
#container {position:relative;}
#item-1,#item-2,#item-3,#item-4,#item-5 {color:#fff; height:300px;}
#item-1 {background:#156D8E;}
#item-2 {background:red;}
#item-3 {background:green;}
#item-4 {background:blue;}
#item-5 {background:#F06;}
ul {position:fixed; right:10px; top:10px;}
ul li {color:#000; background:#fff; height:20px; margin-top:10px; cursor:pointer; border:1px solid #000;}
ul li.active {background:red; color:#fff; border:1px solid #fff;}
ul li a {line-height:20px;}
</style>
<script>

function hasClass(obj, sCls){
	
	return obj.className.match(new RegExp("\\b"+sCls+"\\b", "i"));	
		
	//match是string对象的一个方法，返回字