阶梯导航菜单栏

发布于
2017-09-18

和天猫的左侧导航一样!
点击1号让页面显示一号!一次类推
要求用原生JavaScript!
例如
图片描述

.con>ul li{
    width: 100%;
    height: 300px;
    border: 1px solid salmon;
    text-align: center;
    font-size: 20px;
}
.left{
    position: fixed;
    width: 40px;
    height: 140px;
    left: 0;
    top: 50%;
}
    .left>ul li{
        width: 100%;
        height: 22px;
        border: 1px solid silver;
        text-align: center;
        cursor: pointer;
    }


<div class="con">
    <ul>
        <li>一号</li>
        <li>二号</li>
        <li>三号</li>
        <li>四号</li>
        <li>五号</li>
        <li>六号</li>
    </ul>
</div>
<div class="left">
    <ul>
        <li class="Li">1</li>
        <li class="Li">2</li>
        <li class="Li">3</li>
        <li class="Li">4</li>
        <li class="Li">5</li>
        <li class="Li">6</li>
    </ul>
</div>

javascript

html5 html css

阅读 4.7k

5 个回答

helloworld_

✓ 已被采纳

自己直接写了一个，看代码吧。



<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1,user-scalable=no">
    
    <title></title>

    <style type="text/css">
    
     *{
     margin:0;
     padding:0;
     }
.con{
   position:fixed;
    left:0px;
    top:50%;
    margin-top:-120px;
    
}
ul {
   list-style:none;
}
.con>ul{
  margin:0px;
  padding:0px;
}
.con>ul li{
    width: 100%;
    height: 40px;
    border: 1px solid salmon;
    text-align: center;
    font-size: 20px;
    line-height:40px;
    display:block;
}

.left>ul li{
        width: 100%;
        height: 400px;
        border: 1px solid silver;
        text-align: center;
        cursor: pointer;
    }
    </style>
</head>
<body>
    <div class="con">
    <ul>
        <li class="btn">一号</li>
        <li class="btn">二号</li>
        <li class="btn">三号</li>
        <li class="btn">四号</li>
        <li class="btn">五号</li>
        <li class="btn">六号</li>
    </ul>
</div>
<div class="left">
    <ul>
        <li class="item">1</li>
        <li class="item">2</li>
        <li class="item">3</li>
        <li class="item">4</li>
        <li class="item">5</li>
        <li class="item">6</li>
    </ul>
</div>
<br/><br/>
<br/>
<br/>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<script type="text/javascript">

   //滚动条缓冲动画
    function setScrollToTop (element,target) {
        clearInterval(element.timer);  
        var flag = false;
        var preTop = null;
        element.timer = setInterval(function () {
            var step = (target - element.scrollTop) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);  
             if (step == 0) {  
                       element.scrollTop = target;
             } else if (step > 0 && Math.abs(element.scrollTop - target) <= step) {
                        element.scrollTop = target;
             } else if (step < 0 && (element.scrollTop - target) <= Math.abs(step)) {
                       element.scrollTop = target;
            } else {  
                  element.scrollTop = element.scrollTop + step;
            }  
            if(preTop == null || preTop != element.scrollTop){
                preTop = element.scrollTop;
            }else{
                flag = true;
            }
            if (target == element.scrollTop) flag = true;  
            if(flag){
                clearInterval(element.timer);  
            }
        },10);
}


function getElementTop (element) {
    var actualTop = element.offsetTop;
    var current = element.offsetParent;
    while (current !== null) {
        actualTop += current.offsetTop;
        current = current.offsetParent;
    }
    return actualTop;
}

var contents = document.getElementsByClassName("item");
var btns = document.getElementsByClassName("btn");
for(var i = 0;i < btns.length;i++){
    btns[i].onclick = (function(index){
              return function(){
                var target = getElementTop(contents[index]);
                var srollContainer = navigator.userAgent.indexOf("Chrome") >=0 ?  document.body : document.documentElement; //实际中判断浏览器类型，请用更严谨的方式。
                setScrollToTop(srollContainer,target);
            };
    })(i);
}
</script>
</body>
</html>

演示地址：http://runjs.cn/detail/nptd8bfc

Cuzzy

983

发布于
2017-09-18

新手必学的 tab切换思路源码可以百度上找找tab切换一大堆。

简单的思想：
1、首先你这些要显示的页面，要先写在html代码里，先把显示的这几个标签写如下，比如说是div，然后每个div下面再写下一级页面，比如是span，并用span样式是要隐藏;
2、然后要让需要点击的标签绑定事件委托即div标签;
3、js代码里，点击div，要先获得span标签,并且让span样式里要显示；
例：document.getElementsByTagName('div').onclick=function(ev){ //这里是获得div并绑定事件委托
ev.target.style.display='block'; //这里是点击标签div后，具体div下的那个span就让其样式里显示
}
4、下一级页面也一样类似上面一样操作。