Javascript JQuery函数从多个.js脚本列表中加载DIV

我需要一些帮助来编写在Wordpress中工作的JQuery函数。我正在尝试创建一个未排序的链接列表，将不同的表单从外部站点加载到单个Div中。我可以只加载HTML内容，但似乎无法加载表单。不幸的是，我对JQuery和Javascript知之甚少

您可以在下面和下面的jsfiddle.com链接上看到我在做什么

如果可能的话，我还希望页面加载时第一个链接已经在div中填充，我还希望能够向当前正在填充div的表单的链接添加class=“current form”，这样我就可以将样式设置为不同的，作为当前加载表单的视觉指示器

$（“.link”）。单击（函数（e）{
e、 预防默认值（）；
$（'.content-container-div'）.fadeOut（'slow'）；
$（'#'+$（this.data（'rel'））.fadeIn（'slow'）；
});
.content容器{
位置：相对位置；
宽度：400px；
高度：400px；
}
.content container div{
显示：无；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}

这是荷载形式1的试验内容。
这是荷载形式2的试验内容。
这是荷载形式3的试验内容。
这是荷载形式4的试验内容。
这是荷载形式5的试验内容。
您必须首先解决HTML标记的问题。不要在每个
div
内部使用
script
，而应该使用
iframe
：

<div id="content1">This is the test content for Load form 1. 
       <iframe src="https://widgets.abilafundraisingonline.com/widgets/form.js?channel=care14/carefundinitiative"></iframe>
</div>

这是负载表1的测试内容。

这样，您就可以在应用程序内部加载外部网页。查看
中的工作示例您必须首先用HTML标记解决这个问题。不要在每个
div
内部使用
script
，而应该使用
iframe
：

<div id="content1">This is the test content for Load form 1. 
       <iframe src="https://widgets.abilafundraisingonline.com/widgets/form.js?channel=care14/carefundinitiative"></iframe>
</div>

这是负载表1的测试内容。

这样，您就可以在应用程序内部加载外部网页。查看
中的工作示例我不知道这个小部件是如何工作的，所以我不知道这样添加表单是否是一种好方法，但是如果你想做你想做的事情，你只需要更改几件事。


首先，您无法看到表单，因为您隐藏了内容容器中的所有div

.content-container div {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

点击事件

$('.content-container div').fadeOut('slow');

如果只想隐藏内容div，则必须更加具体

.content-container > div {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

$('.content-container > div').fadeOut('slow');

然后，要显示第一个表单，只需向第一个内容添加CSS属性：

.content-container > div:first-child {
  display: block;
}

最后，要将类添加到活动链接，您可以更新单击功能以删除当前活动类链接并将其添加到新链接：

$(".link").removeClass("current-form");
$(this).addClass("current-form");

并添加一个新的CSS规则：

a.current-form {
  color: red;
}

这是最终代码：


$（文档）.ready（函数（）{
$（“.link”）。单击（函数（e）{
e、 预防默认值（）；
$（“.link”）.removeClass（“当前表单”）；
$（此）.addClass（“当前表单”）；
$（'.content container>div'）.fadeOut（'slow'）；
$（'#'+$（this.data（'rel'））.fadeIn（'slow'）；
});
});
.content容器{
位置：相对位置；
宽度：400px；
高度：400px；
}
.content container>div{
显示：无；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}
.content container>div:第一个子级{
显示：块；
}
a、 当前形式{
颜色：红色；
}

这是荷载形式1的试验内容。
这是荷载形式2的试验内容。
这是荷载形式3的试验内容。
这是荷载形式4的试验内容。
这是荷载形式5的试验内容。
我不知道这个小部件是如何工作的，所以我不知道这样添加表单是否合适，但是如果你想做你想做的事情，你只需要改变几件事。


首先，您无法看到表单，因为您隐藏了内容容器中的所有div

.content-container div {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

点击事件

$('.content-container div').fadeOut('slow');

如果只想隐藏内容div，则必须更加具体

.content-container > div {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

$('.content-container > div').fadeOut('slow');

然后，要显示第一个表单，只需向第一个内容添加CSS属性：

.content-container > div:first-child {
  display: block;
}

最后，要将类添加到活动链接，您可以更新单击功能以删除当前活动类链接并将其添加到新链接：

$(".link").removeClass("current-form");
$(this).addClass("current-form");

并添加一个新的CSS规则：

a.current-form {
  color: red;
}

这是最终代码：


$（文档）.ready（函数（）{
$（“.link”）。单击（函数（e）{
e、 预防默认值（）；
$（“.link”）.removeClass（“当前表单”）；
$（此）.addClass（“当前表单”）；
$（'.content container>div'）.fadeOut（'slow'）；
$（'#'+$（this.data（'rel'））.fadeIn（'slow'）；
});
});
.content容器{
位置：相对位置；
宽度：400px；
高度：400px；
}
.content container>div{
显示：无；
位置：绝对位置；
排名：0；
左：0；
右：0；
底部：0；
}
.content container>div:第一个子级{
显示：块；
}
a、 当前形式{
颜色：红色；
}

这是荷载形式1的试验内容。
这是荷载形式2的试验内容。
这是荷载形式3的试验内容。
这是荷载形式4的试验内容。
这是荷载形式5的试验内容。
您所说的“向链接添加类”是什么意思？是否要在填充外部页面时设置div容器的样式？您所说的“向链接添加类”是什么意思？您想在填充外部页面时设置div容器的样式吗？工作非常好。非常感谢你抽出时间帮助一个陌生人！工作得很好。非常感谢你抽出时间帮助一个陌生人！