Javascript 使用单击事件隐藏和显示div

我想用三个不同的列表元素来控制三个不同的div元素，比如单击list1显示div1的内容等等

HTML

Javascript

var showHide = document.querySelector("ul");
showHide.addEventListener("click", function (e){
    if (e.target.id === "list1"){
        document.getElementById("div1"). style.display="block";

    }

    if (e.target.id === "list2"){
        document.getElementById("div2"). style.display="block";
    }

    if (e.target.id === "list3"){
        document.getElementById("div3"). style.display="block";
    }
});

这是可行的，但如果我单击另一个列表元素，它不会隐藏上一个，所有这些元素都会一起显示。此外，如果您有100个列表和100个div要处理，那么这种方法几乎不可能键入。 注意：我不想使用jQuery或CSS目标元素和HTML锚文本。

---

纯Javascript。

将逻辑提取到单独的函数中，然后使用

e.target

提取列表项的特定

id

，然后将其转换为要显示的div的

id

通过这种方式，您可以轻松处理10对、100对甚至1000对+

li

/

div

对进行隐藏和显示。

var showHide=document.querySelector（“ul”）；
var divElements=document.querySelectorAll（“div”）；
函数showHideElement（元素）{
var itemId=element.id | |“”；
var divId=itemId.replace（“列表”、“div”）；
forEach（函数（元素）{element.style.display=“none”；}）；
document.getElementById（divId）.style.display=“block”；
}
showHide.addEventListener（“单击”，函数（e）{
showHideElement（如目标）；
});
div{
显示：无；
}

列表1
列表2
列表3

文本1就在那里

第二段到了

第三段到了

将逻辑提取到单独的函数中，然后使用
e.target
提取列表项的特定
id
，然后将其转换为要显示的div的
id

通过这种方式，您可以轻松处理10对、100对甚至1000对+
li
/
div
对进行隐藏和显示。


var showHide=document.querySelector（“ul”）；
var divElements=document.querySelectorAll（“div”）；
函数showHideElement（元素）{
var itemId=element.id | |“”；
var divId=itemId.replace（“列表”、“div”）；
forEach（函数（元素）{element.style.display=“none”；}）；
document.getElementById（divId）.style.display=“block”；
}
showHide.addEventListener（“单击”，函数（e）{
showHideElement（如目标）；
});
div{
显示：无；
}

列表1
列表2
列表3

文本1就在那里

第二段到了

第三段到了

试试这个，请参见说明：


var showHide=document.querySelector（“ul”）；
showHide.addEventListener（“单击”，函数（e）{
//把所有的div都藏起来
var divs=document.querySelectorAll（'div'）；
//迭代集合
对于（让div中的div）{
div.style.display=“none”//将display设置为none
}
如果（e.target.id==“列表1”）{
document.getElementById（“div1”）.style.display=“block”；
}
如果（e.target.id==“list2”）{
document.getElementById（“div2”）.style.display=“block”；
}
如果（e.target.id==“list3”）{
document.getElementById（“div3”）.style.display=“block”；
}
});
div{
显示：无；
}

列表1
列表2
列表3

文本1就在那里

第二段到了

第三段到了

试试这个，请参见说明：


var showHide=document.querySelector（“ul”）；
showHide.addEventListener（“单击”，函数（e）{
//把所有的div都藏起来
var divs=document.querySelectorAll（'div'）；
//迭代集合
对于（让div中的div）{
div.style.display=“none”//将display设置为none
}
如果（e.target.id==“列表1”）{
document.getElementById（“div1”）.style.display=“block”；
}
如果（e.target.id==“list2”）{
document.getElementById（“div2”）.style.display=“block”；
}
如果（e.target.id==“list3”）{
document.getElementById（“div3”）.style.display=“block”；
}
});
div{
显示：无；
}

列表1
列表2
列表3

文本1就在那里

第二段到了

第三段到了

使用纯javascript而不使用任何jQuery的工作代码：


var showHide=document.querySelector（“ul”）；
showHide.addEventListener（“单击”，函数（e）{
const active=document.querySelector（“.active”）；
如果（活动）
{
active.style.display=“无”；
active.className=“”；
}
if（如target.id）
{
const list_id=e.target.id.replace（/^\D+/g'，）；
document.getElementById（“div”+list\u id）.style.display=“block”；
document.getElementById（“div”+列表id）.className=“活动”；
}
});
div{
显示：无；
}

列表1
列表2
列表3

文本1就在那里

第二段到了

第三段到了

使用纯javascript而不使用任何jQuery的工作代码：


var showHide=document.querySelector（“ul”）；
showHide.addEventListener（“单击”，函数（e）{
const active=document.querySelector（“.active”）；
如果（活动）
{
active.style.display=“无”；
active.className=“”；
}
if（如target.id）
{
const list_id=e.target.id.replace（/^\D+/g'，）；
document.getElementById（“div”+list\u id）.style.display=“block”；
document.getElementById（“div”+列表id）.className=“活动”；
}
});
div{
显示：无；
}

列表1
列表2
列表3

Te
div {
    display: none;
    }

var showHide = document.querySelector("ul");
showHide.addEventListener("click", function (e){
    if (e.target.id === "list1"){
        document.getElementById("div1"). style.display="block";

    }

    if (e.target.id === "list2"){
        document.getElementById("div2"). style.display="block";
    }

    if (e.target.id === "list3"){
        document.getElementById("div3"). style.display="block";
    }
});

<ul>
    <li id="list1" data-target-id="div1">list 1</li>
    <li id="list2" data-target-id="div2">list 2</li>
    <li id="list3" data-target-id="div3">list 3</li>
</ul>

div {
      display: none;
   }

var showHide = document.querySelector("ul");
    showHide.addEventListener("click", function (e){
        document.querySelectorAll('div').forEach(function(element) {
            element.style.display = "none";
        });

        var data = e.target.dataset;
        if(data){
            document.getElementById(data.targetId).style.display = "block";
        }
    });