原生javascript实现TAB切换

最新推荐文章于 2023-04-11 21:15:41 发布

红浴巾

最新推荐文章于 2023-04-11 21:15:41 发布

阅读量233

点赞数

CC 4.0 BY-SA版权

分类专栏： js学习文章标签： html css JavaScript tab切换

本文链接：https://blog.youkuaiyun.com/qq_37473645/article/details/79517047

本文介绍了如何使用原生JavaScript实现TAB切换功能，常见于电商网站的左侧购物栏。在实现过程中，作者遇到了鼠标移出时元素消失的问题，原因是事件冒泡导致。通过查阅资料，作者发现可以通过阻止事件冒泡来解决这个问题，并推荐了一篇相关文章进行深入学习。

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

所谓TAB切换就是类似于淘宝，京东左侧购物栏那种样式。

1.html：

<!DOCTYPE html>
	<head>
		<meta content="text/html;charset=utf-8">
		<title>tab切换</title>
		<link rel="stylesheet" href="css/index.css" type="text/css"/>
	</head>
	<body>
		<div id="wrap">
			<div id="left">
				<ul id="leftList">
					<li>标题1</li>
					<li>标题2</li>
					<li>标题3</li>
					<li>标题4</li>
					<li>标题5</li>
				<ul>
			</div>
			<div id="right">
				<div>1</div>
                                <div>2</div>
                                <div>3</div>
                               &n