前端开发者前端开发选项卡设计|前端 微信公众号开发教程|微信前端开发教程
html 代码
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no”>
<title>移动端Tab选项卡</title>
<script>
$(function () {
$(“.tab a”).click(function () {
$(this).addClass(‘curr’).siblings().removeClass(‘curr’);
var index = $(this).index();
number = index;
$(‘.nav .content li’).hide();
$(‘.nav .content li:eq(‘ + index + ‘)’).show();
});
})
</script>
<style>
* {
margin: 0;
padding: 0;
}
div,
input,
textarea,
button,
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
ul,
li,
ol {
list-style: none;
}
a {
color: #323232;
outline-style: none;
text-decoration: none;
}
.border-b {
position: relative;
}
.border-b:after {
top: auto;
bottom: 0;
}
.border-t:before,
.border-b:after {
content: ”;
position: absolute;
left: 0;
background: #ddd;
right: 0;
height: 1px;
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.nav {
background-color: #fff;
text-align: center;
}
.nav .tab {
width: 100%;
position: relative;
overflow: hidden;
}
.tab a {
float: left;
width: 49%;
height: 2.56rem;
line-height: 2.56rem;
display: inline-block;
border-right: 1px solid #e1e1e1;
}
.tab a:last-child {
border-right: 0;
}
.tab .curr {
border-bottom: 2px solid #fc7831;
color: #fc7831;
}
.content ul li {
display: none;
padding: 3%;
width: 94%;
}
</style>
</head>
<body>
<div class=”nav”>
<div class=”tab border-b”>
<a href=”javascript:;” class=”curr”>商品介绍</a>
<a href=”javascript:;”>评价(99)</a>
</div>
<div class=”content”>
<ul>
<li style=”display: block”>商品介绍</li>
<li>评价</li>
</ul>
</div>
</div>
</body>
</html>
游戏开发涉及前端的技术|人工智能前端开发最新技术|前端开发 技术社区
970106_lzh 2年前 (2021-01-08)说：
huihui 3年前 (2020-10-20)说：
Satisfy 3年前 (2020-06-05)说：
评论前必须登录！
注册