Javascript 用内容填充Div_Javascript_Jquery_Html_Css

Javascript 用内容填充Div

javascript jquery html css

Javascript 用内容填充Div,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我正在制作一个小页面，其中有一个定义大小的div，其所有内容都设置为不显示 div上方是p标记的列表，这些标记充当“链接”，在单击时更改div的内容。然而，我似乎无法让它发挥作用 HTML Content 1 Content 2 Content 3 <div class="subcontent"> <

我正在制作一个小页面，其中有一个定义大小的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>

如果单击了#link1，您认为让内容1显示的最佳方式是什么

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

如果我提出的任何想法都不清楚，我很抱歉——我对所有这些都还很陌生。

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

试着读一点关于事件处理程序的知识。有onclick、mouseover和许多其他触发器。

1）您需要为

元素编写单击处理程序

2）然后从单击的元素id中提取编号

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

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

以下是一些JQuery，可以实现这一目的。有可能有一个更优雅的解决方案，但这将做的工作

只是为了好玩，我用香草Javascript做了整件事。我更改了一些html处理程序。：）


#分包{
框大小：边框框；
边框：实心1px#DDD；
高度：300px；
宽度：70%；
填充：0px 15px；
左边缘：22%；
边缘底部：10px；
字体大小：90%；
}
.隐藏{
显示：无；
}
头衔
内容1
头衔
内容2
头衔
内容3
//抓取文档句柄
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”）；
});     
函数showContent（idName）{
var children=document.getElementById（'subcent'）.childNodes；
对于（变量i=0；i

对您的HTML进行了一些更改，用于事件委派。如果您希望在将来添加更多的div和链接，这将有助于提高可维护性

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

说明：

获取您单击的链接的索引，从其id中检索编号

找出显示的div，它没有类名

hide

如果显示一个div，则通过添加classname

hide

找出要显示的div，删除classname

hide

你有没有尝试过让它工作起来？我尝试了我遇到的几种不同的Javascript和JQuery概念。他们中的大多数人都是为了替换已经存在的内容，而不是像我想做的那样更改显示属性，所以这并没有让我走得很远。我尝试了一种方法，要求我更改链接和内容上的id和类，以便函数搜索与链接id匹配的内容类并更改该内容的显示属性，但没有成功。当你提问时，如果你能分享你已经尝试过的内容，那就太好了…对-对不起。这是我尝试过的两种技术：1>2>好吧，看看演示，这是一种非常简洁的方法，特别是因为我正在使用的一些页面有很多链接。我试过了，但没有任何效果。令人尴尬的是，我想我可能是错误地链接到外部Javascript文件。这很好，谢谢。我相信所有其他的建议都是有效的，但我想这对我的经验水平来说是最好的。非常感谢你，磁铁。

$("#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");
});

<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>

<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);