Greetings to everyone. I am new to the world of jquery and currently in the process of learning.
This is my script:
<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>The script is functioning as intended. However, I am facing an issue where I want the first page to automatically load with the first button selected. Despite researching solutions and going through various topics, I haven't been able to find a fix.
When clicking through the navigation bar to access the 6 pages, each button gets selected correctly. Yet, on the initial page load, I would like the first button to be automatically selected and the first page to load simultaneously.
I hope this explanation of my query makes sense. Thank you for your time and assistance in advance...