Question

我正在创建一个小页面，其中包含一个已定义大小的div，其所有内容都设置为不显示。

div上方是一个p标签列表，用作＆＃34;链接＆＃34;单击时更改div的内容。但是，我似乎无法让这个工作。

HTML

<p id="link1">Content 1</p>
<p id="link2">Content 2</p>
<p id="link3">Content 3</p>

<div class="subcontent">
<div class="hide cont1">
<p>Title</p>
<p>Content 1</p>
</div>
<div class="hide cont2">
<p>Title</p>
<p>Content 2</p>
</div>
<div class="hide cont3">
<p>Title</p>
<p>Content 3</p>
</div>
</div>

CSS

.subcontent{
    box-sizing: border-box;
    border: solid 1px #DDD;
    height:300px;
    width: 70%;
    padding: 0px 15px;
    margin-left: 22%;
    margin-bottom: 10px;
    font-size: 90%;
}
.hide{
    display: none;

如果点击了＃link1，有什么最佳方法可以让内容1出现？

此外，如果只需点击一下即可显示内容，如何在显示新内容之前将其恢复为隐藏状态？

对不起，如果我提出的任何想法都不清楚 - 我对这一切仍然很陌生。

Answer 1

一些事情：

1）您需要为p元素编写点击处理程序。

2）然后从点击的元素id中提取数字

3）使用提取的数字创建选择器以定位所需的div

 $("p[id^=link]").click(function(){
  var currentdivshowid=this.id.replace( /[^\d.]/g, '' );
  $('.hide').not(".cont"+currentdivshowid).hide();
  $(".cont"+currentdivshowid).toggle();
 });

<强> Working Demo

Answer 2

在JavaScript（和/或JQuery）中，您可以将EventHandlers用于onclick事件。您可以通过ID来为每个p标签关联onclick的事件处理程序。然后，您将使用从此事件处理程序触发的函数来更改关联div的显示。

尝试阅读有关事件处理程序的内容。有onclick，mouseover和许多其他触发器。

Answer 3

为了好玩，我用vanilla Javascript完成了整个过程。我改变了一些html处理程序。：）

<style>
#subcontent{
    box-sizing: border-box;
    border: solid 1px #DDD;
    height:300px;
    width: 70%;
    padding: 0px 15px;
    margin-left: 22%;
    margin-bottom: 10px;
    font-size: 90%;
}
.hide{
    display: none;
}
</style>
</head>
<body>

<a href="#" id="link1">Content 1</a>
<a href="#" id="link2">Contect 2</a>
<a href="#" id="link3">Contect 3</a>

<div id="subcontent">
    <div id="cont1" class="hide">
        <p>Title</p>
        <p>Content 1</p>
    </div>
    <div id="cont2" class="hide">
        <p>Title</p>
        <p>Content 2</p>
    </div>
    <div id="cont3" class="hide">
        <p>Title</p>
        <p>Content 3</p>
    </div>
</div>
<script>

//grab document handles
var link1 = document.getElementById('link1');
var link2 = document.getElementById('link2');
var link3 = document.getElementById('link3');

link1.addEventListener('click', function(){
    showContent('cont1');
});

link2.addEventListener('click', function(){
    showContent('cont2');
});   

link3.addEventListener('click', function(){
    showContent('cont3');
});     

function showContent(idName) {
    var children = document.getElementById('subcontent').childNodes;

    for(var i = 0; i < children.length; i++) {
        if(children[i].nodeName == "DIV") {
            children[i].style.display = "none";
        };
    };
    document.getElementById(idName).style.display = "block";
};
</script>

Answer 4

这是一些可以解决问题的JQuery。可能有一个更优雅的解决方案，但这将完成工作JSFiddle Here

$("#link1").click(function(){
    $(".cont1").removeClass("hide");
    $(".cont2").addClass("hide");
    $(".cont3").addClass("hide");
});
$("#link2").click(function(){
    $(".cont2").removeClass("hide");
    $(".cont1").addClass("hide");
    $(".cont3").addClass("hide");
});
$("#link3").click(function(){
    $(".cont3").removeClass("hide");
    $(".cont2").addClass("hide");
    $(".cont1").addClass("hide");
});

Answer 5

对您的HTML进行一些更改，以进行事件委派。如果您希望将来添加更多DIV和链接，这对您的可维护性有好处。

<div id="links">
  <p id="link1">Content 1</p>
  <p id="link2">Content 2</p>
  <p id="link3">Content 3</p>
</div>

这是脚本

document.getElementById('links').addEventListener('click', function(e) {
    var index = e.target.id.slice(4);
    var showing = document.querySelector('.subcontent > div:not(.hide)');
    if(showing) {
        showing.classList.add('hide');
    }
    document.querySelector('.subcontent > div.cont' + index).classList.remove('hide');
}, false);

说明：

获取您点击的链接索引，从其ID中检索数字
找出显示div，其中没有类名hide
如果有div显示，请通过添加classname hide
找出您要展示的div，删除classname hide

用内容填充Div

5 个答案: