How can I reference the ID of a separate html file using JQuery?
Question
<div id="container">
<nav>
<ul class="clearfix" id="cfix">
<li class="icon" id="icon">
<a href="javascript:void(0);" onclick="myMenu()">☰
Menu</a>
</li>
<div id="drop">
<li><a href="index.html#about">About Me</a></li>
<li><a href="index.html#resume">Resume</a></li>
<li><a href="index.html#music">Music</a></li>
<li><a href="index.html#contact">Contact</a></li>
<li><a href="blog.html">Blog</a></li>
</div>
</ul>
</nav>
</div>
<script>
$(function() {
$('#drop li').click(function() {
$(this).addClass('selected').siblings().removeClass('selected');
});
});
</script>
I'm trying to activate the class [selected] for my ID's referenced on a separate html file [index.html] from bio.html. The code above works while on index.html, but not for bio.html.
I tried adding [href^='index.html#'] to the JQuery selector but to no avail.
How can I reference the ID of a separate html?
2 answers
solution1
0 2017-09-12 00:43:41
I repeat, I'm so sorry for not understanding your question despite that you made it clear at first.
To achieve what you're asking for, just add this to your index.html file:
<script>
$(document).ready(function(){
$("#drop").children().children("[href='index.html"+document.location.hash+"']").addClass('selected');
});
</script>
I hope this is what you're looking for.
solution2
0 2017-09-12 05:01:42
You can not reference a style from another html file.
You should instead write the style to a .css file and include that file in the <head> element of each page you want to use it in.
<head>
<link rel="stylesheet" type="text/css" href="path_to_css_file.css" />
</head>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.