javascript - 加载第一页 onload 和第一个导航按钮点击 onload

Question

首先向大家问好。我是 jquery 的新手，并且在学习曲线上。

我的脚本是这样的:

<script 
src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js">
</script>

<script>
$(function () {
$('#content').find('#nav a').on('click', function (e) {
e.preventDefault();
var page = $(this).attr('href');
$('#content2').load(page);
});
});
$(function() >{
$('#content').find('#nav a').click(function() {
$('#nav a').removeClass('selected');
$(this).addClass('selected');		            
});
});
</script

<div id="content">
 <embed type="image/svg+xml" src="x.svg" />
 <div id="svgfix">
     <embed type="image/svg+xml" src="1.svg" />
     <embed type="image/svg+xml" src="2.svg" />
     <embed type="image/svg+xml" src="3.svg" />
     <embed type="image/svg+xml" src="4.svg" />
     <embed type="image/svg+xml" src="5.svg" />
     <embed type="image/svg+xml" src="6.svg" />
 </div>
 <div id="nav">
      <a href="1.htm"><img type="image/svg+xml" src="1.svg" /></a>
      <a href="2.htm"><img type="image/svg+xml" src="2.svg" /></a>
      <a href="3.htm"><img type="image/svg+xml" src="3.svg" /></a>
      <a href="4.htm"><img type="image/svg+xml" src="4.svg" /></a>
      <a href="5.htm"><img type="image/svg+xml" src="5.svg" /></a>
      <a href="6.htm"><img type="image/svg+xml" src="6.svg" /></a>
 </div>
 </div>
<div id="content2"><h1></h1></div>

脚本运行良好。我遇到的唯一问题是，我希望自动加载第一页并选中第一个按钮。我试图在这里找到解决方案并通读主题，但到目前为止没有任何效果。

脚本应该在单击导航栏时加载 6 个页面，它会加载，并且每个按钮都将被选中。但我想在第一页加载时自动选择第一个按钮并自动加载第一页。

我希望我的问题是可以理解的，感谢您的时间和提前的帮助...

Answer 1

你可以这样做:

创建一个函数并在页面准备好和点击事件时调用

$(function () {

function getPage(el){
var page = $(el).attr('href');
$('#content2').load(page);
$('#nav a').removeClass('selected');
$(el).addClass('selected'); 
}


 getPage($('#nav a:first-child'));//get the first page
$('#nav a').on('click', function (e) {
e.preventDefault();
     getPage($(this));            
});
});