时间戳

首页 > 解决方案 > 单击特定文本时弹出一个信息框

javascript - 单击特定文本时弹出一个信息框

问题描述

我正在使用 CSS 和 HTML 将旧文本数字化。我在侧面有页码以指示原始页码。但我希望用户能够单击页码并弹出一个信息框（信息框包含上一页的最后一个单词和下一页的第一个单词）。现在我知道如何创建信息框，但我不知道如何隐藏它，直到我点击页码，然后当我再次点击页码时消失。

这是一个说明情况的 jsfiddle ( http://jsfiddle.net/8oqu0e5z/ ) 和信息框的 CSS：

.pgwds {
 position:absolute;
 left:-75px;
 margin-top:23px;
 width:140px;
 border:solid;
 background-color: #aaaaaa;
 padding:5px 0px 5px 0px;
 text-indent:0px;
 text-align:center;}

如您所见，前两个分页符（p1 和 p2）有一个信息框。第三个分页符 (p3) 没有信息框。我怀疑实现这一目标的唯一或最简单的方法将涉及 Javascript，但我不知道任何 Javascript。

任何帮助，将不胜感激。谢谢！

标签： javascripthtmlcss

解决方案

有很多方法，最简单的方法首先将您的 pgwds 隐藏

 .pgwds {
 position:absolute;
 left:-75px;
 margin-top:23px;
 width:140px;
 border:solid;
 background-color: #aaaaaa;
 padding:5px 0px 5px 0px;
 text-indent:0px;
 text-align:center;  
 display:none; 
 }

比点击事件附加事件pageno和点击切换你的pgwds显示

let allPageNos=document.getElementsByClassName('pagno');
[...allPageNos].forEach((eachPageNOs)=>{
        eachPageNOs.addEventListener('click',(event)=>{
    console.log(event.target);
    let currentDisp=event.target.children[0].style.display;
    if(currentDisp=='' || currentDisp=='none'){
        event.target.children[0].style.display='block';
    }
    else{
    event.target.children[0].style.display='none';
    }

    })
});

推荐阅读