这个问题是之前提出的问题的后续问题。
这是我的代码块:
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div>
<a class="link" href="#about" data-link="first">Instructions</a> •
<a class="link" href="#about" data-link="second">Video</a> •
</div>
<div>
<div class="instruction_type" data-link="first">
<p>TEXT 1</p>
</div>
<div class="instruction_type" data-link="second">
<p>TEXT 2</p>
</div>
</div>
</body>
<script type="text/javascript">
$('.instruction_type').hide();
$('.link').click(function() {
$('.instruction_type').hide();
$('.instruction_type[data-link=' + $(this).data('link') + ']').fadeIn({ width: '200px'}, 300);
});
</script>
功能齐全!但是,目前,您加载页面并看到两个可点击的链接:“说明”和“视频”。该页的其余部分是空白的。
我希望页面默认为“说明”,然后如果您单击“视频”,它会更改页面的内容。
需要明确的是:功能代码,希望页面在加载时显示说明。
最佳答案
只需将此代码添加到 JavaScript 末尾即可:
$('.link:first').click();
这样,当页面加载时,将单击第一个按钮..
你的 JavaScript 代码将是这样的:
$('.instruction_type').hide();
$('.link').click(function() {
$('.instruction_type').hide();
$('.instruction_type[data-link=' + $(this).data('link') + ']').fadeIn({ width: '200px'}, 300);
});
$('.link:first').click();
关于javascript - 使用 div 外部的按钮更改 div 的内容?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24788286/