html中制作标签卡(tabs)
更新于2019-02-26 15:36:16
快速建立一个html标签卡(tabs)
在网页中常常会看到这样的标签页，其实实现的方法也不难，接下来就介绍如何快速的建立一个html标签卡
这是我做好的demo预览效果
使用的软件以及技术：
- sublime text 3编辑器
- css3
- jQuery
1.建立一个html，并写好基本的结构
如果你使用的是sublime text 3的并安装emmet插件，就可以快速创建了：div>(ul>li{Section $}*4)+div*4，然后敲击tab键。
给整体的div添加class为label，给第一个li添加class为showed，给第一个小div添加class为showed，并完善div里的文字内容
-
<div class="label">
-
<ul>
-
<li class="showed">Section 1
</li>
-
<li>Section 2
</li>
-
<li>Section 3
</li>
-
<li>Section 4
</li>
-
</ul>
-
<div class="showed">
<h3>This is the first section
</h3>
</div>
-
<div>
<h3>This is the second section
</h3>
</div>
-
<div>
<h3>This is the third section
</h3>
</div>
-
<div>
<h3>This is the fourth section
</h3>
</div>
-
</div>
2.编写css样式
- 设定label的大小为宽400，高500，位置和文字都居中。
- 设定ul的大小为宽400，高50,
- 设定li的大小为宽100，高50，无头部样式，向左浮动，默认的背景色为灰色，文字为白色上下居中。
- 设定下面的内容宽400，高50，绝对定位（让四个div重叠），文字为白色，背景为灰黑色，默认隐藏。
- li标签中的showed类就是现在要展示的标签，突出展示，颜色为灰黑色，顶部有橘色的边框，文字调整高度居中，设置阴影突出立体感。
- div标签中的showed类就是对应展现的内容了，display改为block显示，并设置阴影突出立体感。
- 代码如下：
-
*{
-
margin:
0px;
-
padding:
0px;
-
}
-
.label{
-
width:
400px;
-
height:
500px;
-
margin:
120px auto;
-
text-align: center;
-
}
-
.label>
ul{
-
width:
400px;
-
height:
50px;
-
}
-
.label>
ul>
li{
-
list-style: none;
-
float: left;
-
width:
100px;
-
height:
50px;
-
background-color: gray;
-
line-height:
50px;
-
color: white;
-
}
-
.label>
div{
-
width:
400px;
-
height:
500px;
-
position: absolute;
-
color: white;
-
line-height:
70px;
-
background-color:
#222222;
-
display: none;
-
}
-
.label
li
.showed{
-
background-color:
#222222;
-
border-top:
5px solid orange;
-
line-height:
40px;
-
box-shadow:
5px
5px
20px
#333333;
-
}
-
.label
div
.showed{
-
display: block;
-
box-shadow:
5px
5px
20px
#333333;
-
}
3.编写js
- 首先引入jqurey
- 当鼠标悬停在li标签上时，如果不是showed类的话（不是当前展现的内容），执行以下步骤
- 将带有showed类的标签去掉showed类
- 将当前的li添加上showed类
- 将当前对象li标签在父标签中的位置index()对应的内容div也添上showed类
-
<script type=
"text/javascript" src=
"jquery-1.6.js">
</script>
-
<script>
-
$(
".label li").mouseenter(
function () {
-
if(! $(
this).hasClass(
".showed")){
-
$(
".showed").removeClass(
"showed");
-
$(
this).addClass(
"showed");
-
$(
".label>div").eq($(
this).index()).addClass(
"showed");
-
}
-
})
-
<
/script>
4.完成
这样简单的几个步骤就完成动态的页面效果，演示在文章的开头，完整的demo文件在百度网盘中。
标签卡Demo.html演示文件：百度网盘 https://pan.baidu.com/s/1bpVwQuV
<li class="tool-item tool-active is-like "><a href="javascript:;"><svg class="icon" aria-hidden="true"> <use xlink:href="#csdnc-thumbsup"></use> </svg><span class="name">点赞</span> <span class="count">1</span> </a></li> <li class="tool-item tool-active is-collection "><a href="javascript:;" data-report-click="{"mod":"popu_824"}"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-csdnc-Collection-G"></use> </svg><span class="name">收藏</span></a></li> <li class="tool-item tool-active is-share"><a href="javascript:;"><svg class="icon" aria-hidden="true"> <use xlink:href="#icon-csdnc-fenxiang"></use> </svg>分享</a></li> <!--打赏开始--> <!--打赏结束--> <li class="tool-item tool-more"> <a> <svg t="1575545411852" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5717" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M179.176 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5718"></path><path d="M509.684 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5719"></path><path d="M846.175 499.222m-113.245 0a113.245 113.245 0 1 0 226.49 0 113.245 113.245 0 1 0-226.49 0Z" p-id="5720"></path></svg> </a> <ul class="more-box"> <li class="item"><a class="article-report">文章举报</a></li> </ul> </li> </ul> </div> </div> <div class="person-messagebox"> <div class="left-message"><a href="https://blog.youkuaiyun.com/disILLL"> <img src="https://profile.csdnimg.cn/3/A/6/3_disilll" class="avatar_pic" username="disILLL"> <img src="https://g.csdnimg.cn/static/user-reg-year/2x/2.png" class="user-years"> </a></div> <div class="middle-message"> <div class="title"><span class="tit"><a href="https://blog.youkuaiyun.com/disILLL" data-report-click="{"mod":"popu_379"}" target="_blank">桂ILLL</a></span> </div> <div class="text"><span>发布了4 篇原创文章</span> · <span>获赞 5</span> · <span>访问量 4583</span></div> </div> <div class="right-message"> <a href="https://im.youkuaiyun.com/im/main.html?userName=disILLL" target="_blank" class="btn btn-sm btn-red-hollow bt-button personal-letter">私信 </a> <a class="btn btn-sm bt-button personal-watch" data-report-click="{"mod":"popu_379"}">关注</a> </div> </div> </div> </article>
扫一扫
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
