页签功能的实现

最新推荐文章于 2021-06-04 16:27:55 发布

刘奉钦-以书会友

最新推荐文章于 2021-06-04 16:27:55 发布

阅读量659

点赞数 1

分类专栏： WEB 学习

本文链接：https://blog.csdn.net/Kevin1906/article/details/103846615

版权

学习同时被 2 个专栏收录

66 篇文章 0 订阅

订阅专栏

WEB

19 篇文章 1 订阅

订阅专栏

页签

源码

<!DOCTYPE html>
<html>

<head>
  <title>页签</title>
  <style type="text/css">
    body {
  font-family: 'Microsoft YaHei'; 
  font-size: 14px;
  background-color: #f5f4f7;
  margin: 0;
  color: #252525;
}
a {
  text-decoration: none;
}
h3, h4 {
  margin: 0;
  font-weight: 400;
  font-size: inherit;
}
ul {
  padding-left: 0;
  /*没有修饰符号*/
  list-style: none;
  margin: 0;
}
p {
  margin-top: 0;
  margin-bottom: 0;
}
div.Jhds {
  position: relative;
}
.Jhds .radio {
  /*透明度*/
  opacity: 0;
  position: absolute;   
}

/*nth-of-type(1)表示父元素的第一个radio标签，checked ~ 表示被选中的radio后的兄弟标签 这里找了.tab-title label标签*/
/*整个控制的意思是当第一个单选按钮被点击时，将下一个兄弟标签<tab-title>的第一个label标签选中*/
.Jhds .radio:nth-of-type(1):checked ~ .tab-title label:nth-of-type(1) {
  color: #fff;
  background-color: #498fee;
}
/*如果是第二个则设置第二个label的颜色*/
.Jhds .radio:nth-of-type(2):checked ~ .tab-title label:nth-of-type(2) {
  color: #fff;
  background-color: #498fee;
}
.Jhds .radio:nth-of-type(3):checked ~ .tab-title label:nth-of-type(3) {
  color: #fff;
  background-color: #498fee;
}
/*选择兄弟标签<tab-outer>下的 <tab-inner>标签*/
.Jhds .radio:nth-of-type(1):checked ~ .tab-outer .tab-inner:nth-of-type(1) {
/*显示该对象 */
  display: block;
}
.Jhds .radio:nth-of-type(2):checked ~ .tab-outer .tab-inner:nth-of-type(2) {
  display: block;
}
.Jhds .radio:nth-of-type(3):checked ~ .tab-outer .tab-inner:nth-of-type(3) {
  display: block;
}
/*页签的点击栏*/
.Jhds .tab-title {
  font-size: 0;
  padding-left: -10px;
  text-align: center;
}
.Jhds .tab-title label{
  /*在一行内显示*/
  display: inline-block;
  color: #498fee;
  text-align: center;
  background-color: #fff;
  /*边界*/
  border: 1px solid #498fee;
  font-size: 14px;
  width: 30%;
  padding: 5px 0;
}
/*第一个<first-child>*/
.Jhds .tab-title label:first-child {
  border-right: 0 none;
  /*圆角化*/
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.Jhds .tab-title label:last-child {
  border-left: 0 none;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
/*隐藏所有模块*/
.Jhds .tab-outer .tab-inner {
  display: none;
}
.Jhds .tab-inner li{
  position: relative;
  background-color: #fff;
}

.Jhds .title:after,
.Jhds .tab-inner li:before,
.Jhds .tab-inner li:last-child:after{
  position: absolute;
  left: 0;
  content: '';
  width: 100%;
  height: 1px;
  font-size: 0;
  background-color: #d9d9d9;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
}
.Jhds .tab-inner li:before {
  top: 0;
}
.Jhds .title:after,
.Jhds .tab-inner li:last-child:after {
  bottom: 0;
}
.Jhds .title {
  padding: 10px;
  position: relative;
  overflow: hidden;
}
.Jhds .title .Jhds-num {
  color: #498fee;
  white-space: nowrap;
}
.Jhds .title .time {
  /* float: right; */
  display: inline-block;
}
.Jhds .list {
  padding: 10px 60px 10px 10px;
  position: relative;
  color: #252525;
  display: block;
}
.Jhds .price {
  color: #f90;
  margin-top: 5px;
}
.Jhds .num {
  position: absolute;
  right: 30px;
  top: 50%;
  height: 20px;
  line-height: 20px;
  margin-top: -10px;
}
.arrow {
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -6px;
  width: 10px;
  height: 10px;
  border-left: 1px solid #cfcfcf;
  border-top: 1px solid #cfcfcf;
  -webkit-transform: rotate(135deg);
  transform: rotate(135deg);
}

@media screen and (max-width:370px) {
  .Jhds .title .time {
    float: none;
  }
}


  </style>
</head>

<body>

  <div class="Jhds">
    <input checked class="radio" type="radio" name="Jhds" id="Jhds1">
    <input class="radio" type="radio" name="Jhds" id="Jhds2">
    <input class="radio" type="radio" name="Jhds" id="Jhds3">
    <div class="tab-title">
      <label for="Jhds1">待付款</label>
      <label for="Jhds2">待签收</label>
      <label for="Jhds3">已完成</label>

    </div>
    <div class="tab-outer">
      <ul class="tab-inner">
        <li>
          <h3 class="title">
            <span class="Jhds-num">进货单号：jkdjh2015072623125699</span>
            <span class="time">今天 23：12 进货</span>
          </h3>
          <a class="list" href="###">
            <h4>60°飞天茅台最好的茅台浓香1000ml</h4>
            <p class="price">待确认：¥129.00</p>
            <span class="num">X6</span>
            <span class="arrow"></span>
          </a>
        </li>
      </ul>
      <ul class="tab-inner">
        <li>
          <h3 class="title">
            <span class="Jhds-num">进货单号：jkdjh2015072623965199</span>
            <span class="time">今天 23：12 进货</span>
          </h3>
          <a class="list" href="###">
            <h4>50°西凤·御宴酒（精装版）500ml</h4>
            <p class="price">已发货：¥39.00</p>
            <span class="num">X1</span>
            <span class="arrow"></span>
          </a>
        </li>
      </ul>
      <ul class="tab-inner">
        <li>
          <h3 class="title">
            <span class="Jhds-num">进货单号：jkdjh2015072623126899</span>
            <span class="time">今天 23：12 进货</span>
          </h3>
          <a class="list" href="###">
            <h4>法国富乐男爵干红葡萄酒豪华大礼包</h4>
            <p class="price">已签收：¥369.00</p>
            <span class="num">X6</span>
            <span class="arrow"></span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

刘奉钦-以书会友

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
页签功能的实现

页签<div class="Jhds"> <input checked class="radio" type="radio" name="Jhds" id="Jhds1"> <input class="radio" type="radio" name="Jhds" id="Jhds2"> <div class="tab-title...
复制链接

扫一扫