Question

我有一些基本的jquery正在改变单个div的内容。我唯一想知道的是如何在页面首次加载时将四个外部HTML文件之一（即lookbook20141217.HTML）显示为默认值。现在，容器DIV“lookBookWindow”为空，直到点击其中一个“按钮”。

JSFIDDLE

HTML

<div id="lookBookMain">

<div id="lookBookWindow"></div>

<input id="lookbook20141217" class="thumbnail rm" type="image" src="thumbnails/20141217.jpg" alt="maurices lookbook20141217" width="220" height="220" border="0" />
<input id="lookbook20141114" class="thumbnail rm" type="image" src="thumbnails/20141114.jpg" alt="maurices lookbook20141114" width="220" height="220" border="0" />
<input id="lookbook20141018" class="thumbnail rm" type="image" src="thumbnails/20141018.jpg" alt="maurices lookbook20141018" width="220" height="220" border="0" />
<input id="lookbook20141016" class="thumbnail" type="image" src="thumbnails/20141016.jpg" alt="maurices lookbook20141016" width="220" height="220" border="0" />

</div>

CSS

#lookBookMain {
    width: 940px;
    margin: 0px auto;
    padding: 0px;
    position: relative;
}

#lookBookWindow {
    width: 940px;
    height: 580px;
    margin: 0px;
    padding: 0px;
}

.thumbnail {
    width: 220px;
    height: 220px;
    margin: 0px;
    padding: 20px 0px 0px 0px;
    position: relative;
    float: left;
}

input.thumbnail:focus {
    outline-width: 0;
}

.rm{
    margin-right: 20px;
}

JQUERY

$('input[type="image"]').click(function() {
    var pageName = this.id;
    $('#lookBookWindow').load(pageName + '.html');
});

我觉得它应该只是jquery中的另一条线，但我找不到网上需要的东西。提前谢谢！

Answer 1

如果您想要加载特定页面，只需在点击处理程序之外.load()。

另一种选择是触发第一张图片上的点击：

$('input[type="image"]').click(function() {
    var pageName = this.id;
    $('#lookBookWindow').load(pageName + '.html');

}).first().click();

Answer 2

我觉得它应该只是jquery中的另一行

是的。在...之外：

$('input[type="image"]').click(function() {
    var pageName = this.id;
    $('#lookBookWindow').load(pageName + '.html');
});

添加：

$('#lookBookWindow').load('lookbook20141217.html');

首先使用您要加载的HTML文件。

使用jquery .load更改该DIV中的HTML时，将初始HTML加载到DIV中

2 个答案: