pc端
@media screen and (min-width: 768px) {}
手机端
@media screen and (max-width: 768px) {}
代码实现
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
.cardtab{
/* 默认无边框 */
border: none;
box-sizing: border-box;
width: 100%;
display: flex;
/* 均匀排列每个元素每个元素周围分配相同的空间 */
justify-content: space-around;
}
.item {
width: 50%;
/* 行内块元素 */
display: inline-block;
text-align: center;
height: auto;
line-height: 40px;
font-size: 1.4em;
/* 鼠标指针放在一个元素边界范围内时所用的光标形状 (一只手) */
cursor: pointer;
font-weight: bolder;
}
/* 边框 */
#firstTab {
background-repeat: no-repeat;
background-position: 95% 80%;
background-size: 75px 40px;
border: 1px solid red;
border-bottom: 2px solid #0000cc;
color: red;
background-color: white;
}
#firstTab.active {
color: white;
background-color: red;
border-bottom: none;
}
#secondTab {
border: 1px solid #0000cc;
border-bottom: 2px solid red;
color: #0000cc;
background-color: white;
}
#secondTab.active {
color: white;
background-color: #0000cc;
border-bottom: none;
}
#firstTab.active .tab_sharp,#secondTab.active .tab_sharp{
background-color: white;
}
#firstTab .tab_sharp{
background-color: red;
}
#secondTab .tab_sharp{
background-color: #0000cc;
}
.tab_sharp{
width: 97%;
height: 5px;
margin: 5px auto;
}
.card_container {
border: 2px solid red;
margin-top: -2px;
}
</style>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
<body>
<div class="cardtab">
<a class="item active" id="firstTab" data-tab = "first">
<div class="tab_sharp"></div>
第一个表
</a>
<a class="item" id="secondTab" data-tab="second" href="javascript:void(0)" >
<div class="tab_sharp"></div>
第二个表
</a>
</div>
<div class="card_container">
<div class=" card_content" data-tab="first" align="center">
<p>我是第一个表的内容</p>
</div>
<div class=" card_content" data-tab="second" hidden align="center">
<p>我是第二个表的内容</p>
</div>
</div>
<script>
$(document).ready(function () {
// card
var target;
$(".cardtab .item").on("click", function () {
if (target != $(this).data("tab")) {
target = $(this).data("tab");
var color = $(this).css("color");
/* //siblings()用于查找当前元素的同胞元素,主要作用就是除了自己外的其他同胞元素设置样式或者其他事件。 */
$(this).removeClass("active").addClass("active").siblings().removeClass("active")
$(".card_content[data-tab=" + target + "]").show().siblings().hide();
$(".card_container").css({
"border-color": color,
"border-top-color": "transparent"
})
}
})
});
</script>
</body>
</html>
详细可见:菜鸟编辑器