45fan.com - 路饭网

搜索: 您的位置：主页 > 电脑频道 > 电脑教程 > 阅读资讯：XSS实现Tab布局实例有什么？

XSS实现Tab布局实例有什么？

2017-08-27 08:00:05 来源:www.45fan.com 【大 中 小】

XSS实现Tab布局实例有什么？

一、布局方式

1、内容与tab分离

<div class="container">
  <div class="tab-content">
   <div id="item1" class="item">内容1</div>
   <div id="item2" class="item">内容2</div>
   <div id="item3" class="item">内容3</div>
   <div id="item4" class="item">内容4</div>
  </div>
  <div class="tab-control">
   <ul>
    <li><a href="#item1">内容1</a></li>
    <li><a href="#item2">内容2</a></li>
    <li><a href="#item3">内容3</a></li>
    <li><a href="#item4">内容4</a></li>
   </ul>
  </div>
</div>
ul,li{
 margin:0;
 padding:0;
 list-style:none;
}
.container{
 width:400px;
 height:300px;
 background-color:silver;
}
.tab-content{
 width:100%;
 height:80%;
 overflow:hidden;
}
.tab-content .item{
 width:100%;
 height:100%;
}
.tab-control{
 width:100%;
 height:20%;
}
.tab-control ul{
 height:100%;
}
.tab-control li{
 width:25%;
 height:100%;
 float:left;
 border:1px solid silver;
 box-sizing:border-box;
 background-color:white;
 cursor: pointer;
}
.tab-control li:hover{
 background-color:#7b7474
}
.tab-control a{
 display:inline-block;
 width:100%;
 height:100%;
 line-height:100%;
 text-align:center;
 text-decoration: none;
}
.tab-control a::after{
 content:"";
 display:inline-block;
 height:100%;
 vertical-align:middle;
}
.tab-content .item:target{
 background:yellow;
}

XSS实现Tab布局实例有什么？

2、内容与tab一体

<div class="container">
  <ul>
   <li class="item active">
    <p class="title">1</p>
    <p class="content">1</p>
   </li>
   <li class="item">
    <p class="title">2</p>
    <p class="content ml1">2</p>
   </li>
   <li class="item">
    <p class="title">3</p>
    <p class="content ml2">3</p>
   </li>
   <li class="item">
    <p class="title">4</p>
    <p class="content ml3">4</p>
   </li>
  </ul>
</div>
ul,li,p{
 margin:0;
 padding:0;
 list-style:none;
}
.container{
 width:400px;
 height:300px;
 background-color:silver;
 border:1px solid silver;
}
.container ul{
 width:100%;
 height:100%;
 overflow:hidden;
}
.container .item{
 float:left;
 width:25%;
 height:100%;
 background-color:white;
}
.container .item .title{
 line-height:40px;
 border:1px solid silver;
 box-sizing:border-box;
 text-align:center;
 cursor:pointer;
}
.container .item .content{
 width:400%;
 height:100%;
 background-color:yellow;
}
.ml1{
 margin-left:-100%;
}
.ml2{
 margin-left:-200%;
}
.ml3{
 margin-left:-300%;
}
.active{
 position:relative;
 z-index:1
}
.container .item:hover{
 position:relative;
 z-index:1
}
.container .item:hover .title{
 border-bottom:none;
 background-color:yellow;
}

XSS实现Tab布局实例有什么？

利用负margin，将内容区对齐，然后内容去添加背景色，避免不同tab对应的区域透视重叠。

二、CSS实现交互

1、锚点实现（target）

(1)针对布局一：item从上往下排列，父元素tab-content加上overflow:hidden。利用锚点，点击不同a标签的时候，具有对应ID的item会切换到tab-content的视图中，然后利用hover给tab按钮加上切换样式。

<div class="container">
  <div class="tab-content">
   <div id="item1" class="item">内容1</div>
   <div id="item2" class="item">内容2</div>
   <div id="item3" class="item">内容3</div>
   <div id="item4" class="item">内容4</div>
  </div>
  <div class="tab-control">
   <ul>
    <li><a href="#item1">内容1</a></li>
    <li><a href="#item2">内容2</a></li>
    <li><a href="#item3">内容3</a></li>
    <li><a href="#item4">内容4</a></li>
   </ul>
  </div>
</div>
ul,li{
 margin:0;
 padding:0;
 list-style:none;
}
.container{
 width:400px;
 height:300px;
 background-color:silver;
}
.tab-content{
 width:100%;
 height:80%;
 overflow:hidden;
}
.tab-content .item{
 width:100%;
 height:100%;
}
.tab-control{
 width:100%;
 height:20%;
}
.tab-control ul{
 height:100%;
}
.tab-control li{
 width:25%;
 height:100%;
 float:left;
 border:1px solid silver;
 box-sizing:border-box;
 background-color:white;
 cursor: pointer;
}
.tab-control li:hover{
 background-color:#7b7474
}
.tab-control a{
 display:inline-block;
 width:100%;
 height:100%;
 line-height:100%;
 text-align:center;
 text-decoration: none;
}
.tab-control a::after{
 content:"";
 display:inline-block;
 height:100%;
 vertical-align:middle;
}

上述方法只是利用了锚点切换，没有使用：target。修改CSS

ul,li{
 margin:0;
 padding:0;
 list-style:none;
}
.container{
 width:400px;
 height:300px;
 background-color:silver;
}
.tab-content{
 position:relative;
 width:100%;
 height:80%;
 overflow:hidden;
}
.tab-content .item{
 position:absolute;
 left:0;
 top:0;
 width:100%;
 height:100%;
}
.tab-control{
 width:100%;
 height:20%;
}
.tab-control ul{
 height:100%;
}
.tab-control li{
 width:25%;
 height:100%;
 float:left;
 border:1px solid silver;
 box-sizing:border-box;
 background-color:white;
 cursor: pointer;
}
.tab-control li:hover{
 background-color:#7b7474
}
.tab-control a{
 display:inline-block;
 width:100%;
 height:100%;
 line-height:100%;
 text-align:center;
 text-decoration: none;
}
.tab-control a::after{
 content:"";
 display:inline-block;
 height:100%;
 vertical-align:middle;
}

.tab-content .item:target{
 z-index:1;
 background-color:yellow;
}

item使用绝对定位，然后使用:target修改元素z-index达到切换效果（其实也可以通过控制元素的display来达到切换效果）

（2）针对布局二：

<div class="container">
  <ul>
   <li class="item active" id="item1">
    <p class="title"><a href="#item1">1</a></p>
    <p class="content">1</p>
   </li>
   <li class="item" id="item2">
    <p class="title"><a href="#item2">2</a></p>
    <p class="content ml1">2</p>
   </li>
   <li class="item" id="item3">
    <p class="title"><a href="#item3">3</a></p>
    <p class="content ml2">3</p>
   </li>
   <li class="item" id="item4">
    <p class="title"><a href="#item4">4</a></p>
    <p class="content ml3">4</p>
   </li>
  </ul>
</div>
ul,
li,
p {
 margin: 0;
 padding: 0;
 list-style: none;
}

.container {
 width: 400px;
 height: 300px;
 background-color: silver;
 border: 1px solid silver;
}

.container ul {
 width: 100%;
 height: 100%;
 overflow: hidden;
}

.container .item {
 float: left;
 width: 25%;
 height: 100%;
 background-color: white;
}

.container .item .title {
 line-height: 40px;
 border: 1px solid silver;
 box-sizing: border-box;
 text-align: center;
 cursor: pointer;
}
.container .item a {
 display:inline-block;
 width:100%;
 height:100%;
 text-decoration: none;
}

.container .item .content {
 width: 400%;
 height: 100%;
 background-color: yellow;
}

.ml1 {
 margin-left: -100%;
}

.ml2 {
 margin-left: -200%;
}

.ml3 {
 margin-left: -300%;
}

.active {
 position: relative;
 z-index: 1
}

.container .item:target {
 position: relative;
 z-index: 1
}

.container .item:target .title {
 border-bottom: none;
 background-color: yellow;
}

2、hover实现

（1）针对布局一：

无法简单的通过CSS实现

（2）针对布局二：

<div class="container">
  <ul>
   <li class="item active">
    <p class="title">1</p>
    <p class="content">1</p>
   </li>
   <li class="item">
    <p class="title">2</p>
    <p class="content ml1">2</p>
   </li>
   <li class="item">
    <p class="title">3</p>
    <p class="content ml2">3</p>
   </li>
   <li class="item">
    <p class="title">4</p>
    <p class="content ml3">4</p>
   </li>
  </ul>
</div>
ul,li,p{
 margin:0;
 padding:0;
 list-style:none;
}
.container{
 width:400px;
 height:300px;
 background-color:silver;
 border:1px solid silver;
}
.container ul{
 width:100%;
 height:100%;
 overflow:hidden;
}
.container .item{
 float:left;
 width:25%;
 height:100%;
 background-color:white;
}
.container .item .title{
 line-height:40px;
 border:1px solid silver;
 box-sizing:border-box;
 text-align:center;
 cursor:pointer;
}
.container .item .content{
 width:400%;
 height:100%;
 background-color:yellow;
}
.ml1{
 margin-left:-100%;
}
.ml2{
 margin-left:-200%;
}
.ml3{
 margin-left:-300%;
}
.active{
 position:relative;
 z-index:1
}
.container .item:hover{
 position:relative;
 z-index:1
}
.container .item:hover .title{
 border-bottom:none;
 background-color:yellow;
}

3、label与:checked实现

（1）针对布局一：

<div class="container">
 <div class="tab-content">
  <input type="radio" name="item" class="radio-item" id="item1" checked/>
  <div class="item">内容1</div>
  <input type="radio" name="item" class="radio-item" id="item2" />
  <div class="item">内容2</div>
  <input type="radio" name="item" class="radio-item" id="item3" />
  <div class="item">内容3</div>
  <input type="radio" name="item" class="radio-item" id="item4" />
  <div class="item">内容4</div>
 </div>
 <div class="tab-control">
  <ul>
   <li><label for="item1">内容1</label></li>
   <li><label for="item2">内容2</label></li>
   <li><label for="item3">内容3</label></li>
   <li><label for="item4">内容4</label></li>
  </ul>
 </div>
</div>
ul,
li {
 margin: 0;
 padding: 0;
 list-style: none;
}

.container {
 width: 400px;
 height: 300px;
 background-color: silver;
}

.tab-content {
 position: relative;
 width: 100%;
 height: 80%;
 overflow: hidden;
}

input {
 margin: 0;
 width: 0;
}

.tab-content .item {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
}

.tab-control {
 width: 100%;
 height: 20%;
}

.tab-control ul {
 height: 100%;
}

.tab-control li {
 width: 25%;
 height: 100%;
 float: left;
 border: 1px solid silver;
 box-sizing: border-box;
 background-color: white;
}

.tab-control li:hover {
 background-color: #7b7474
}

.tab-control label {
 display: inline-block;
 width: 100%;
 height: 100%;
 line-height: 100%;
 text-align: center;
 text-decoration: none;
 cursor: pointer;
}

.tab-control label::after {
 content: "";
 display: inline-block;
 height: 100%;
 vertical-align: middle;
}
.tab-content .radio-item{
 display:none;
}
.tab-content .radio-item:checked+.item {
 z-index: 1;
 background-color: yellow;
}

利用css :checked与+（选择紧接在另一个元素后的元素，而且二者有相同的父元素）选择符。

（2）针对布局二：

<div class="container">
  <ul>
   <li class="item active">
    <input type="radio" name="item" class="radio-item" id="item1" checked/>
    <label class="title" for="item1">1</label>
    <p class="content">1</p>
   </li>
   <li class="item">
    <input type="radio" name="item" class="radio-item" id="item2" />
    <label class="title" for="item2">2</label>
    <p class="content ml1">2</p>
   </li>
   <li class="item">
    <input type="radio" name="item" class="radio-item" id="item3" />
    <label class="title" for="item3">3</label>
    <p class="content ml2">3</p>
   </li>
   <li class="item">
    <input type="radio" name="item" class="radio-item" id="item4" />
    <label class="title" for="item4">4</label>
    <p class="content ml3">4</p>
   </li>
  </ul>
</div>
ul,li,p{
 margin:0;
 padding:0;
 list-style:none;
}
.container{
 width:400px;
 height:300px;
 background-color:silver;
 border:1px solid silver;
}
.container ul{
 width:100%;
 height:100%;
 overflow:hidden;
}
.container .item{
 float:left;
 width:25%;
 height:100%;
 background-color:white;
}
.container .item .title{
 display:inline-block;
 width:100%;
 line-height:40px;
 border:1px solid silver;
 box-sizing:border-box;
 text-align:center;
 cursor:pointer;
}
.container .item .content{
 position:relative;
 width:400%;
 height:100%;
 background-color:yellow;
}
.ml1{
 margin-left:-100%;
}
.ml2{
 margin-left:-200%;
}
.ml3{
 margin-left:-300%;
}
.radio-item{
 display:none;
}
.radio-item:checked~.title{
 background-color:yellow;
 border-bottom:none;
}
.radio-item:checked~.content{
 background-color:yellow;
 z-index:1;
}

以上这篇CSS实现Tab布局的简单实例(必看)就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持路饭。


本文地址：http://www.45fan.com/dnjc/91623.html
Tags： 实现 css Tab
编辑：路饭网
  • 上一篇：superMLC颗粒的详细介绍
  • 下一篇：适合Amd Ryzen5 1600X的主板的详细介绍
    • 相关文章列表
    推广内容
    推荐阅读
    热门推荐
    推荐文章
    关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部

    Copyright ©2012-2013 . 版权所有  

    路饭网|路由器设置|192.168.1.1|无线路由器设置|192.168.0.1 www.45Fan.com