zoukankan      html  css  js  c++  java
  • 基础

    结构

    <div id="weiyi" class="box">
    <div class="order">
    <span>达文西</span><span>末梢血</span><span>华泰强</span><span>史克力</span>
    </div>
    <div class="target">
    <ul>
    <li>达文西</li>
    <li>末梢血</li>
    <li>华泰强</li>
    <li>史克力</li>
    </ul>
    </div>
    </div>

    样式

    * {
    margin: 0;
    padding: 0;
    }
    ul {
    list-style-type: none;
    }
    .box {
    325px;
    border: 3px solid #C81623;
    margin: 100px auto;
    }
    .order {
    padding: 5px;
    padding-right: 0;
    }
    .order span {
    display: inline-block;
    75px;
    height: 30px;
    margin-right: 5px;
    text-align: center;
    font: 400 normal 18px/30px "Microsoft Sans Serif";
    cursor: pointer;
    background-color: #DBE1E7;
    }
    .order span.special {
    background-color: #C81623;
    }
    .target li {
    90%;
    height: 200px;
    padding: 5%;
    background-color: #d7d764;
    display: none;
    }
    .target li.show {
    display: block;
    }

    行为

    window.onload = function () {
    function clearClass(aDiv) {
    for(var i= 0,l=aDiv.length;i<l;i++) {
    aDiv[i].className = "";
    }
    }
    function setIndex (aDiv) {
    for(var i= 0,l=aDiv.length;i<l;i++) {
    aDiv[i].index = i;
    }
    }
    function tab(parentId) {
    var oParent = document.getElementById(parentId);
    var aSpan = oParent.getElementsByTagName("span");
    var aLi = oParent.getElementsByTagName("li");
    setIndex(aSpan);
    for(var i= 0,l=aSpan.length;i<l;i++) {
    aSpan[i].onmouseover = function () {
    clearClass(aSpan);
    this.className = "special";
    clearClass(aLi);
    aLi[this.index].className = "show";
    }
    }
    aSpan[0].onmouseover();
    }

    tab("weiyi");
    }
  • 相关阅读:
    启动时间知多少?8款音视频类应用测评报告分析
    优化信息流很麻烦?三招教你轻松搞定
    vmstat
    iostat
    dstat
    strace
    Mysql(一)
    rsync
    Kubernetes-深入分析集群安全机制
    Kubernetes-apiserver
  • 原文地址:https://www.cnblogs.com/WeWeZhang/p/5730054.html
Copyright © 2011-2022 走看看