jquery 4行代码实现简单选项卡

原创于 2018-06-06 12:07:16 发布 · 268 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery 简单选项卡

jquery 专栏收录该内容

13 篇文章

订阅专栏

本文介绍如何使用HTML创建导航列表，并通过CSS进行样式设计及布局调整，利用JavaScript实现鼠标悬停时的交互效果。

图示：

HTML代码：

<ul class="navlist">
		<li class="nav">1</li>
		<li class="nav">2</li>
		<li class="nav">3</li>
		<li class="nav">4</li>
		<li class="nav">5</li>
	</ul>

css代码：

.nav{
		width: 200px;
		height: 100px;
		background: #ccc;
		display: block;
		float: left;
		border: 1px solid #fff;
		text-align: center;
		line-height: 100px;
	}

	.active{
		color: #fff;
		background: pink;
	}

js代码：

 $('.navlist .nav:first').addClass('active')     //默认设置第一项为当前样式
      $('.navlist .nav').on('mouseenter',function(){
      	$(this).addClass('active');                   //鼠标移入项设置为当前样式并让自己的兄弟节点取消当前样式
      	$(this).siblings().removeClass('active');
      })