网页布局与交互设计-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43868692/article/details/103136896
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Dome</title>
  <style>
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td { margin:0; padding:0; }
body, button, input, select, textarea { font:12px/1.5tahoma, arial, \5b8b\4f53; }
h1, h2, h3, h4, h5, h6{ font-size:100%; }
address, cite, dfn, em, var { font-style:normal; }
code, kbd, pre, samp { font-family:couriernew, courier, monospace; }
small{ font-size:12px; }
ul, ol { list-style:none; }
a { text-decoration:none; }
a:hover { text-decoration:underline; }
sup { vertical-align:text-top; }
sub{ vertical-align:text-bottom; }
legend { color:#000; }
fieldset, img { border:0; }
button, input, select, textarea { font-size:100%; }
table { border-collapse:collapse; border-spacing:0; }
    .box {
      width: 800px;
      height: 500px;
      margin: 50px auto;
    }
    .ul {
      width: 100%;
      height: 40px;
      list-style: none;
      display: flex;
      justify-content: space-around;
      border-bottom: 1px solid #ddd;
    }

    .ul li {
      padding: 10px  100px;
      text-align: center;
      cursor: pointer;
      margin-bottom: -1px;
    }
    .content{
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 20px;
      border: 1px solid #cccccc;
      border-top:0 ;
      
    }
    .content .content1{
      width: 100%;
      height: 100%;
    }
    .con{
      display: flex;
    }
    .hide{
      display: none;
    }
    .Left{
      width: 100px;
      height: 100%;
      /* background: #f8f8f8; */
      border-right: 1px solid #ccc;
    }
    .Right{
      width: 100%;
      height: 100%;
      border: 1px solid #ccc;
      border-left: 0;
      box-sizing: border-box;
      padding: 10px;
    }
    .Right li{
      width: 100%;
      height: 100%;
      background:#fff;
    }
    .active{
      background-color: #fff;
      border: 1px solid #ddd;
      border-bottom-color: transparent;
      border-radius:4px 4px 0 0 ;
    }
    .Left li{
      width: 100%;
      height: 40px;
      text-align: center;
      line-height: 40px;
      cursor: pointer;
    }
    .Left li:nth-child(1){
      margin: 10px 0 0 0;
    }
  
    .actives{
      background-color: cornflowerblue;
      border: 1px solid #ddd;
      border-right: transparent;
      border-radius:4px  0 0 4px;
      color: #fff;
    }
    .contenr{
      width: 100%;
      height: 90%;
    }

    .btn{float: right;}
    .btn button{
      width: 100px;
      height: 30px;
      border: 0;
      background: cornflowerblue;
      color: #fff; 
      border-radius:4px ;
    }
    .dui,.cuo{
      display: none;
    }
    .text{
      margin:0 60px ;
    }
  </style>
</head>

<body>
  <div class="box">
    <ul class="ul">
      <li class="li1 active">HOme</li>
      <li class="li2">Color</li>
    </ul>
    <div class="content">
      <div class="content1 con">
        <ul class="Left">
          <li class="actives">Li1</li>
          <li>Li2</li>
          <li>Li3</li>
        </ul>
        <ul class="Right">
          <li class="">
            <div class="contenr">Li11</div>
            <div class="btn">
                <button>next</button>
                <button>stop</button>
            </div>
          </li>
          <li class="hide">
              <div class="contenr">Li22</div>
              <div class="btn">
                  <button>next</button>
                  <button>stop</button>
              </div>
          </li>
          <li class="hide">
              <div class="contenr">Li33</div>
              <div class="btn">
                  <button>next</button>
                  <button>stop</button>
              </div>
          </li>
        </ul>
      </div>
      <div class="content1 hide">
        <input class="text" type="text">
        <span class="dui">√</span>
        <span class="cuo">×</span>
        <div class="btn">
            <button class="btn1">启动</button>
            <button class="btn2">停止</button>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="jquery.min.js"></script>

<script>
 $(".ul li").click(function () {
  $(this).addClass("active").siblings().removeClass("active");
  $(".content .content1").hide().eq($(".ul li").index(this)).show();
})
$(".Left li").click(function () {
  $(this).addClass("actives").siblings().removeClass("actives");
  $(".Right li").hide().eq($(".Left li").index(this)).show();
})
$('.btn1').click(function(){
  $('.dui').show();
  $('.cuo').hide();
})
$('.btn2').click(function(){
  $('.cuo').show();
  $('.dui').hide();
})
</script>
</html>
JQ--Tab效果切换
