用内容填充Div

我正在制作一个小的页面，该页面的所有内容都设置为不显示，该小页面具有已定义大小的div。用内容填充Div

在div上方是一个p标签列表，当点击时它们充当“链接”来更改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;

对什么是获取内容1，如果被点击＃LINK1出现的最好方法任何想法？

此外，如果内容一次点击就显示出来了，在显示新内容之前我怎么能够隐藏内容？

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

来源

2014-12-02 Christian Bowers

你尝试任何事情，使工作？ – 2014-12-02 02:33:50

我尝试了几个不同的Javascript和JQuery概念，我碰到过。他们中的大多数都是为了替换已经存在的内容，而不是像我想做的那样改变显示属性，所以它没有让我走得很远。我尝试了一种方法，它要求我更改链接和内容上的id和类，以便该函数可以搜索与链接id相匹配的内容类并更改该内容的显示属性，但它不成功。 – 2014-12-02 02:41:11

当你问一个问题时，如果你能分享你已经试过的东西，那将是非常好的。 – 2014-12-02 02:43:58

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

试着读一下事件处理程序。有一些用于onclick，mouseover和其他许多触发器。

来源

2014-12-02 02:37:47

几件事情：

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

来源

2014-12-02 02:38:46

那么，看着Demo，这个是一个非常简洁的做法，特别是因为我使用的这些页面中有一些有很多链接。我试过了，但没有得到任何结果。虽然这很令人尴尬，但我想我可能会错误地链接到外部Javascript文件。 – 2014-12-02 03:03:37

这里创建选择器被一些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"); 
});

来源

2014-12-02 02:39:28 Zach

只是为了好玩，我与香草的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>

来源

2014-12-02 03:23:38 magreenberg

这工作得很好，谢谢。我相信所有其他建议也可以发挥作用，但我想这只是我的经验水平最好的。非常感谢你，磁铁。 – 2014-12-02 03:33:25

upvote如果它帮助你请 – magreenberg 2014-12-02 03:40:58

对您的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显示通过添加类名hide
找出你要显示的DIV隐藏，删除类名hide

来源

2014-12-02 03:37:16 Leo

用内容填充Div

回答

相关问题