您的位置：首页 > Web前端 > CSS

css3制作tab卡片选中小尖角

2016-03-31 12:46 162 查看
tab选项卡在网页中经常会用到，下面是制作一种箭头指示选中效果的写法。



实现效果



<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>酒邻居</title>
<link href="css/main.css" rel="stylesheet" media="screen" type="text/css" />
<script src="js/jquery-1.9.1.min.js"></script>
<style type="text/css">
.tabcss {
width: 15px;
transform: rotate(45deg);
background-color: white;
position: relative;
height: 15px;
bottom: -10px;
left: 50%;
margin-left: -7.5px;
}
</style>
</head>
<body>
<div class="nav">
<a class="backward" href="MemberInfo.aspx"></a>
<span style="position: absolute; top: 15px; left: 24px; color: white; font-size: 10pt;">个人中心</span>
<span class="title" style="margin-left: -24px;">积分</span>
</div>
<form id="Form2" method="post" runat="server">
<div class="main">
<div style="background-color: rgb(191, 57, 71); color: white;">
<div style="line-height: 30px; display: flex; width: 13em; margin: 0px auto;">
<div style="height: 1px; background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.75)); margin-top: 14.5px; width: 5em;"></div>
<div style="width: 5em; text-align: center;">总积分</div>
<div style="height: 1px; margin-top: 14.5px; background-image: linear-gradient(to right, rgba(255, 255, 255, 0.75), transparent); width: 5em;"></div>
</div>
<div style="text-align: center; font-size: 25pt;">
1200
</div>
<div style="display: flex; text-align: center; height: 4em;">
<div style="flex: 1 1 0%; margin-top: 1.5em;" onclick="tabchenge(this)">
全部积分
</div>
<div style="flex: 1 1 0%; margin-top: 1.5em;" onclick="tabchenge(this)">
积分支入
</div>
<div style="flex: 1 1 0%; margin-top: 1.5em;" onclick="tabchenge(this)">
积分支出
</div>
</div>
</div>
<div class="data" runat="server" id="ulOrderList">
</div>
<div id="Income" style="display: none">
<ul>
<li style="background-color: white; white-space: nowrap; text-overflow: ellipsis; padding: 10px 20px;margin-bottom: 0.2em;">
<div style="color: black;">
消费：玛歌菩伊乐 波尔多干白葡萄酒
</div>
<div style="color: rgb(130, 130, 130); overflow: hidden; line-height: 16pt;">
<div style="float: left;">
时间：2016.02.03 16.33
</div>
<div style="float: right; font-size: 16pt; color: rgb(194, 72, 84);">
+300
</div>
</div>
</li>
<li style="background-color: white; white-space: nowrap; text-overflow: ellipsis; padding: 10px 20px;margin-bottom: 0.2em;">
<div style="color: black;">
消费：玛歌菩伊乐 波尔多干白葡萄酒
</div>
<div style="color: rgb(130, 130, 130); overflow: hidden; line-height: 16pt;">
<div style="float: left;">
时间：2016.02.03 16.33
</div>
<div style="float: right; font-size: 16pt; color: rgb(194, 72, 84);">
+300
</div>
</div>
</li>
</ul>
</div>
<div id="expenditure" style="display: none">
<li style="background-color: white; white-space: nowrap; text-overflow: ellipsis; padding: 10px 20px;margin-bottom: 0.2em;">
<div style="color: black;">
消费：玛歌菩伊乐 波尔多干白葡萄酒
</div>
<div style="color: rgb(130, 130, 130); overflow: hidden; line-height: 16pt;">
<div style="float: left;">
时间：2016.02.03 16.33
</div>
<div style="float: right; font-size: 16pt; color: rgb(194, 72, 84);">
-300
</div>
</div>
</li>
<li style="background-color: white; white-space: nowrap; text-overflow: ellipsis; padding: 10px 20px;margin-bottom: 0.2em;">
<div style="color: black;">
消费：玛歌菩伊乐 波尔多干白葡萄酒
</div>
<div style="color: rgb(130, 130, 130); overflow: hidden; line-height: 16pt;">
<div style="float: left;">
时间：2016.02.03 16.33
</div>
<div style="float: right; font-size: 16pt; color: rgb(194, 72, 84);">
-300
</div>
</div>
</li>
</div>
</div>
</form>
<script type="text/javascript">
//显示选中的tab
var tabsname = ["ulOrderList", "Income", "expenditure"];
function showtab(whichtab) {
for (var i = 0; i < 3; i++) {
if (tabsname[i] == whichtab) {
$("#" + whichtab).css("display", "");
} else {
$("#" + tabsname[i]).css("display", "none");
}
}
}
//tab切换脚本
var htmlslelecttab = "<div style=\"overflow: hidden;\"><div class=\"tabcss\"></div></div>";
function tabchenge(ele) {
var tabs = $(ele).parent().children();
for (var i = 0; i < 3; i++) {
$(tabs[i]).html($(tabs[i]).text().trim());
if (tabs[i] == ele) {
$(ele).append(htmlslelecttab);
showtab(tabsname[i]);
}
}
}
</script>
</body>
</html>


源码下载

http://pan.baidu.com/s/1pLio36V
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航