正在使用jquery
在div
内部加载外部页面,效果很好但只有当我触发点击功能时,它才会打开一个外部页面
加载页面时,它应该触发第一个按钮
试过这个
function HideLoader() {
$('#loader').css('display', 'none');
}
function ShowLoader() {
$('#loader').css('display', 'block');
}
$('.reveal').on('click', function (e) {
var $that = $(this);
e.preventDefault();
ShowLoader();
var link = $(this).attr('href');
$('.tab-content').load(link, function () {
HideLoader(); // this puts it in the load callback, so that this stuff
$that.show(); // happens when the load is complete
});
});
.HTML
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" class="btn btn-primary reveal" href="test.php">
<div class="hidden-xs">Info</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default reveal" href="#tab2">
<div class="hidden-xs">Favorites</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default reveal" href="#tab3">
<div class="hidden-xs">Following</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" class="btn btn-default reveal" href="#tab3">
<div class="hidden-xs">Friends</div>
</button>
</div>
</div>
<div class="well">
<div class="tab-content">
<img src="../css/ajax-loader.gif" alt="loading" class="center" id="loader"/>
</div>
</div>
这个函数index.php
当我运行这个文件时,它应该显示test.php
,当我去click function()
函数应该继续
我尝试了上述方法,但不起作用
您可以在页面加载时自动单击第一个按钮,如下所示:
$(function() {
$('.btn-primary').click();
});
click
方法的文档有:
将事件处理程序绑定到"click"JavaScript 事件,或在元素上触发该事件。
在上面的代码中,它是我们正在做的触发。
关于 $(函数 ...):
在文档"准备就绪"之前,无法安全地操作页面。jQuery 会为您检测这种就绪状态。
$( document ).ready()
中包含的代码仅在页面文档对象模型 (DOM) 准备好执行 JavaScript 代码时运行。经验丰富的开发人员有时会使用速记
$()
如果这不执行任何操作,则第二个选项是等待页面完全加载(还有图像等):
$(window).load(function() {
$('.btn-primary').click();
});
关于$(window).load
:
在页面完全加载(包括图形)时运行函数。
首先将 id 放在第一个按钮上
<button type="button" id="first_btn" class="btn btn-primary reveal" href="test.php">
然后
$(document).ready(function(){
$("#first_btn").click();
});
运行并检查是否得到结果。