<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>tab栏切换</title>
<script src="jquery-1.11.1.min.js"></script>
<style>
*{/*去除页面原有边距*/
margin: 0;
padding: 0;
}
.wrapper{/*定义标题盒子*/
width: 400px;
height: 33px;
margin: 100px auto;
border: 1px solid red;
}
.tab-item{/*标题栏设置*/
float:left;
display: block;
font-size: 20px;/*字体大小*/
background-color: white;
}
.active{/*标题栏选中状态*/
border-top: 3px solid red;
}
a:hover{/*鼠标悬停变色*/
background-color:aqua;
}
ul{/*去除小圆点*/
list-style: none;
}
a{
text-decoration: none;/*去除下划线*/
}
</style>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item"><a href="#">国际大牌</a></li>
<li class="tab-item"><a href="#">国妆名牌</a></li>
<li class="tab-item"><a href="#">清洁用品</a></li>
<li class="tab-item"><a href="#">男士精品</a></li>
</ul>
</div>
</body>
<script>
// 需求:给tab栏的每一个li标签设置鼠标移入事件:当前li添加active类,其他的兄弟li移除active类
$(function(){
// 给当前索引栏引入一致的div,让他添加selected类,其他的兄弟div移除selected类
$('.tab>.tab-item').mouseenter(function(){
$(this).addClass('active').siblings('li').removeClass('active');
});
$('.tab>.tab-item').mouseleave(function(){
$(this).removeClass('active');
});
});
</script>
</html>
请求大佬支援!!!!为什么我设置的盒子的大小和代码设置的大小不一样
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
1条回答
- lllomh 2019-05-07 20:20关注
你好,盒子分两种。一种是怪异盒子:box-sizing:border-box; 还有一种是标准盒子 box-sizing:content-box;
我看到你css 这没有指定。你可以切换个盒子模型试试!
希望我的回答对你有帮助,希望采纳本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥15 错误 LNK2001 无法解析的外部符号
- ¥50 安装pyaudiokits失败
- ¥15 计组这些题应该咋做呀
- ¥60 更换迈创SOL6M4AE卡的时候,驱动要重新装才能使用,怎么解决?
- ¥15 让node服务器有自动加载文件的功能
- ¥15 jmeter脚本回放有的是对的有的是错的
- ¥15 r语言蛋白组学相关问题
- ¥15 Python时间序列如何拟合疏系数模型
- ¥15 求学软件的前人们指明方向🥺
- ¥50 如何增强飞上天的树莓派的热点信号强度,以使得笔记本可以在地面实现远程桌面连接