javascript - 如何实现div串的渐显渐隐？-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 AI 提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - 如何实现div串的渐显渐隐？

天蓬老师 2017-04-10 15:15:53

[JavaScript讨论组]

569

最近碰到一个问题，将问题简化了一下写出来，希望得到大家的指点。下面是问题：
功能实现：点击一个显示的p，该p隐藏，下一个p显示；再次点击显示的p ... 依次进行。
源代码
为方便查看，下面也给出源代码：




    
1
    2
    3
    4
    5
    6
    7



css:
.myp {
    display: inline-block;
    width: 50px; height: 20px;
    background-color: lightgreen;
}
.myp:not(:nth-child(1)) {
    visibility: hidden;
}


js:
window.onload = function(){
    var cur = 1;
    var curp = document.getElementById("p" + cur);
    var nextp = document.getElementById("p" + ++cur);
    curp.onclick = function(){
        curp.style.visibility = "hidden";
        nextp.style.visibility = "visible";
    }
}

目前的问题是只能进行第一次点击，之后就无法通过点击触发事件了。求教问题出在哪里，如何改进，或者有其他更好的方法？

天蓬老师

欢迎选择我的课程，让我们一起见证您的进步~~

全部回复(3)

大家讲道理2017-04-10 15:17:53 3楼

下面是我根据你的需求写的一个效果（不知道是不是这样）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
         * {
            margin: 0;
            padding: 0;
         }
         ul {
            list-style: none;
            padding: 20px;
         }
         .demo {
            visibility: hidden;
            width: 80px;
            margin-bottom: 15px;
            padding: 10px;
            background-color: red;
            color: blue;
         }
         .active {
            visibility: visible; 
         }
    </style>
</head>
<body>
    <ul>
        <li class="demo active">1</li>
        <li class="demo">2</li>
        <li class="demo">3</li>
        <li class="demo">4</li>
    </ul>

    <script type="text/javascript">
        var aDemo = document.querySelectorAll('.demo'),
            _now = 0;

        for (var i = 0; i < aDemo.length; i++) {
            aDemo[i].addEventListener('click', function(){
                if (_now === aDemo.length - 1) {
                    _now = 0;
                } else {
                    _now += 1;
                }

                this.className = 'demo';
                aDemo[_now].className += ' active';
            }); 
        };
    </script>
</body>
</html>

你自己的写那个问题在于只给了一个绑定了事件，所以只有点击第一个才有效果。你需要的是给所有都绑定上事件。不需要一个一个使用id来获取，可以使用getElementsByTagName来获取一个元素集合，然后用for循环来给每一个元素绑定事件！

赞 +0

添加回复

天蓬老师2017-04-10 15:17:53 2楼

改了一下上上面的答案

javascriptvar aDemo = document.querySelectorAll('.demo'),
            _now = 0;

        for (var i = 0; i < aDemo.length; i++) {
            aDemo[i].addEventListener('click', function(){

                            _now = (_now+=1)%(aDemo.length);

                this.className = 'demo';
                aDemo[_now].className += ' active';
            }); 
        };

赞 +0

添加回复

巴扎黑2017-04-10 15:17:53 1楼

以上几个答案都都是用js控制样式。(不太推荐这种做法)
其实我们只需把样式写在css文件内,用js给对应的p添加一个class即可.(个人推荐的做法)
另外并不需要给每个p都加一个id,可使用data-index代替.
方法如下:

//html


<p>
    <p class = "myp active" data-index="1">1</p>
    <p class = "myp" data-index="2">2</p>
    <p class = "myp" data-index="3">3</p>
    <p class = "myp" data-index="4">4</p>
    <p class = "myp" data-index="5">5</p>
    <p class = "myp" data-index="6">6</p>
    <p class = "myp" data-index="7">7</p>
</p>



//css
.myp {
    display: inline-block;
    width: 50px; height: 20px;
    background-color: lightgreen;
}
.myp{
    visibility: hidden;
}
.active{
  visibility: visible;
}

//js


<script>
$(function() {
  $(".myp").on('click', function() {
    event.preventDefault();
    if($(this).attr("data-index") == 7){
      $(this).removeClass("active");
      $(".myp").eq(0).addClass("active");
    }
    else{
      $(this).removeClass("active");
      $(this).next("p").addClass("active");
    }
  });
});
</script>

望采纳,Thx.

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>