jq的tab选项卡

最新推荐文章于 2023-07-28 14:46:41 发布

zyfacd

最新推荐文章于 2023-07-28 14:46:41 发布

阅读量162

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/zyfacd/article/details/105415894

版权

这篇博客详细介绍了如何利用jQuery库创建三种不同的Tab选项卡效果，包括切换内容、样式变化等，适用于网页交互设计，提升用户体验。

摘要由CSDN通过智能技术生成

效果一：在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box{
   width: 500px;height: 400px;border: solid 1px black;margin: 20px auto;}
			.box ul{
   margin: 0;padding: 0;list-style: none;height: 40px;line-height
			:40px;display: flex;background: #ccc;text-align: center;}
			.box li{
   flex:1;border-left: solid 1px black;border-right: solid 1px black;}
			.box li.active{
   background: red;}

			.cont{
   }
			.cont div{
   width: 500px;height: 360px;display: none;}
			.cont .cont1{
   background: #f0f;display: block;}
			.cont .cont2{
   background: #f00;}
			.cont .cont3{
   background: #00f;}
			.cont .cont4{
   background: #0ff;}
		</style>
	</head>
	<body>
	   <div class="box">
	        <ul><li class="active">新闻</li><li>广告</li><li>招聘</li><li>介绍</li></ul>
	        <div class="cont">
	            <div class="cont1">第一个选项卡的内容区域，111111</div>
	            <div class="cont2">第二个选项卡的内容区域，222222222</div>
	            <div class="cont3">第三个选项卡的内容区域，333333</div>
	            <div class="cont4">第四个选项卡的内容区域，444444</div>
	        </div>
	    </div>
	</body>
	<script src="../jQuery.js"></script>//可自行在官网下载引入
	<script type="text/javascript">
		// 点击li，设置当前项，操作对应内容区域
		$(".box").find("li").click(function(){
   
			// 先取消所有，再给当前加

			// 先给当前加，然后取消其他兄弟
			// 此处的this，默认找到的是原生js的DOM对象
			//console.log(this);
			
			$(this).addClass("active").siblings().removeClass("active");
			
			// 获取当前点击元素的索引
			// console.log($(this).index()

最低0.47元/天解锁文章

zyfacd

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq的tab选项卡

效果一：<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box{width: 500px;height: 400px;border: solid 1px ...
复制链接

扫一扫

专栏目录