please help me for remove or hide my #id on url browser.
example:
my menu1 target on "#p1"
my site "mysite.com/index.htm"
when i click menu1 on my browser will like this "mysite.com/index.htm#p1"
i need my id not show on url browser just "mysite.com/index.htm" not like this "mysite.com/index.htm#p1"
#p1:target { background: red;}
#p2:target{ background: green;}
#p3:target{ background: blue;}
#p4:target{ background: yellow;}
#p5:target{ background: coral;}
#p6:target{ background: skyblue;}
ul{list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {float: left;}
li a{ display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;}
li a:hover {
background-color: #111;
}
<div id="menu">
<input type="checkbox" id="tbl-menu"/>
<label for="tbl-menu"><img src="drop.png" height="40px" width="40px" alt=""></label>
<nav class="nav">
<ul class="tombol">
<li class="tombolmenu">
<a class="t1" href="#p1">Menu1</a></li>
<li><a class="t2" href="#p2">Menu2</a></li>
<li><a class="t3" href="#p3">Menu3</a></li>
<li><a class="t4" href="#p4">Menu4</a></li>
<li><a class="t5" href="#p5">Menu5</a></li>
<li><a class="t6" href="#p6">Menu6</a></li>
</ul>
</nav>
</div>
<!-- My page target -->
<div id="p1"> Page1 </div>
<div id="p2"> Page2 </div>
<div id="p3"> Page3 </div>
<div id="p4"> Page4 </div>
<div id="p5"> Page5 </div>
<div id="p6"> Page6 </div>
I know this question is starting to be old in Internet years but I thought I'd share my solution (which is loosely based off Janmejay Agrawal's).
It basically replaces the standard behaviour of a hyperlink and creates a smooth scrolling to the desired element.
This code uses "vanilla" JS and should work with most web browsers.
//Get all the hyperlink elements
var links = document.getElementsByTagName("a");
//Browse the previously created array
Array.prototype.forEach.call(links, function(elem, index) {
//Get the hyperlink target and if it refers to an id go inside condition
var elemAttr = elem.getAttribute("href");
if(elemAttr && elemAttr.includes("#")) {
//Replace the regular action with a scrolling to target on click
elem.addEventListener("click", function(ev) {
ev.preventDefault();
//Scroll to the target element using replace() and regex to find the href's target id
document.getElementById(elemAttr.replace(/#/g, "")).scrollIntoView({
behavior: "smooth",
block: "start",
inline: "nearest"
});
});
}
});
Should this code not be correct, please feel free to point it out !
There are several ways to do it, and my favourite is to make a custom function to scroll to in page link instead of relying on browser for it.
Like this
$("a[href^='#']").click(function(e){
e.preventDefault();
var elem = $($(this).attr('href'));
/* check for broken link */
if(elem.length)
$(window).animate('scrollTop' , elem.offset().top)
})
In addition of hiding '#id' from url it'll also animate scrolling.
Hope It'll help.
Related
I found a way to solve this issue about closing iframe element by using jQuery. But it has opened 2 more issues. How can I use a href link opens an iframe object center of page of this way to replace all menu items. And when I close the content in iframe windows all element does recovery in back state?!
I post sample video which to see the theme of site I want iframe to stay in the same page like transparency defined in css as rule. I have some ideas to put on every link on menu iframe with different page conents and at bottom to paste some button for close. I hope someone has ideas to write. I'd be thankful!
Video: here!
jQuery code:
$('document').ready(function(myFunc){
'use strict';
var htmlString;
var oldState = $('#main-page').clone();
$('iframe').addClass('.decoration');
$('#aboutWin').click( function(e){
event.preventDefault();
htmlString = $(this).html('<iframe src="./content/about.html"/>');
$('#main-page').replacewith(htmlString);
});
$("#btncls").on('click', function(){
/*var iframes = document.querySelectorAll('iframe');
for (var i = 0; i < iframes.length; i++) {
iframes[i].parentNode.removeChild(iframes[i]);
}*/
$('html').detach();
$('#main-page').append(oldState);
if($('#btncls').onclick()){
return myFunc;
};
});
});
PageCode here:
<body>
<div id=main-page class="decoration">
<div id="cover-gif">
<div id="center">
<ul class="main-menu">
<li><a id="index.html" class="fontEuroStreet cool-link">Home</a></li>
<li><a id="storiesWin" class="fontEuroStreet cool-link">Stories</a></li>
<li><a id="scriptsWin" class="fontEuroStreet cool-link">Scripts</a></li>
<li><a id="downloadsWin" class="fontEuroStreet cool-link">Downloads</a></li>
<li><a id="aboutWin" class="fontEuroStreet cool-link">About</a></li>
</ul>
</div>
<div id=short-content>
<h1 class="head-text fontPolyReg">Welcome to Polyveil site!</h1>
<p class="short-text fontEuroRoad">Hello! In this site will be sharing mysterious things about universe, new age technologies, using SCM/CLEO scripting in GTA Vice City.</p>
</div>
</div>
</div>
I re-post here code from about.html:
<cc>
<body style="width: 320px; height: 240px;" class="decoration">
<img src="../_main_src/info.png" style="clear both; float: left; margin-left: 24px;" />
<h1 class="head-text fontXoloB" style="float: center; padding-top: 16px; padding-left: 86px;">About</h1>
<div class="h-line" style="margin-left: 32px; padding-left: 2px;">
<iframe src="../content/about%20mission.txt" class="decoration infoblock fontXoloReg" style="text-align: left; float: left; margin-left: 4px; position: relative; color: mediumaquamarine;"></iframe>
</div>
<div class="h-line" style="margin-top: 482px; margin-left: 32px;"><input id="btncls" type="button" value="Close" class="button cool-link fontXoloB" /></div>
</cc>
I am designing my FAQs page for that i have used questions as links and answers in paragraph tags. I want to show answer of its respective question when its question link is clicked, i have coded till now and its working perfect.
My problem is that i have some answers where i have used links as well. so when i click such question link it shows its answer (Fine) but when i click the link in answer it hides the whole answer which i don't want. i want to open that link in new tab, and when i click question again it should hide that answer.
HTML
<div class="pageContents">
<div class="list_Q" id="Q3">
<a class="que" href="#">
<h5><strong>Q) </strong>
How can I test EPX before I buy it?
</h5>
</a>
<p id="ans-pop"><strong>A) </strong>Demo link for EPX is <a target="_blank" href="http://google.com/" class="link_read">Here </a></p>
</div>
<div class="list_Q" id="Q15">
<a class="que" href="#">
<h5>
<strong>Q) </strong>How can I create Endicia account I'd?
</h5>
</a>
<p id="ans-pop"><strong>A) </strong>Visit <a target="_blank" href="http://www.endicia.com/" class="link_read">Endicia</a> for
creating Endicia account.
</p>
</div>
</div>
CSS
#ans-pop {
display: none;
}
.list_Q {
BORDER-BOTTOM: #333333 1px dotted;
MARGIN-BOTTOM: 5px;
}
.list_Q H5 {
PADDING-BOTTOM: 5px;
PADDING-LEFT: 5px;
PADDING-RIGHT: 5px;
MARGIN-BOTTOM: 0px;
BACKGROUND: #ededed;
COLOR: #d80d0d;
FONT-SIZE: 12px;
FONT-WEIGHT: normal;
PADDING-TOP: 5px;
}
.list_Q P {
PADDING-BOTTOM: 5px;
PADDING-LEFT: 5px;
PADDING-RIGHT: 5px;
COLOR: #333333;
FONT-SIZE: 12px;
PADDING-TOP: 5px;
}
Jquery
$('.list_Q').click(function () {
var status = $(this).attr('id');
var fix = '#' + status + ' #ans-pop';
if ($(fix).is(":not(:visible)")) {
$(fix).show(500);
} else {
$(fix).hide(500);
}
return false;
});
fiddle
Just check if the target is not a tag like this:
if ($(event.target).is('a')) {
return;
}
http://jsfiddle.net/P45bE/129/
Update
In the below fiddle the code close the opened question while it show the clicked.
Hide the opened answer using $('.ans-pop:visible').hide(500);
Important I replaced the id="ans-pop" to class="ans-pop" because id attribute must be unique. Especially in this case.
http://jsfiddle.net/P45bE/132/
Add a class on your link and stop the event propagation on the click of your link.
<a target="_blank" class="test" href="http://www.endicia.com/" class="link_read">Endicia</a>
$('.test').click(function (e){
e.stopPropagation();
});
DEMO
I think you want this, try to replace your code with this
$('.list_Q a').click(function (){
var status = $(this).parent().attr('id');
Use e.stopPropagation(); in the anchors you want to click:
$("a[href!=#]").click(function (e) {
e.stopPropagation();
});
Demo
I would do it like this:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="faq">
<h5><strong>Q) </strong> Question number 1 </h5>
<div id="answer_1" class="answer">
<p><strong>A)</strong> Answer, with an <a target="_blank" href="http://google.com/" class="link_read">external link</a>.</p>
</div>
</div>
<div class="faq">
<h5><strong>Q) </strong>Here's another question</h5>
<div id="answer_2" class="answer">
<p><strong>A)</strong> Another answer, with another <a target="_blank" href="http://google.com/" class="link_read">external link</a>.</p>
</div>
</div>
$('.question').on('click', function(){
var href = $(this).attr('href');
$(href).toggle();
return false;
});
.answer {
display:none;
}
Seeing as you're using links, I've added the ID of the answer as the href so the questions and answers are linked, even without the JS.
In jQuery, the href is then grabbed from the link and used to select and show/hide the answer div
External links work as they normally would, as the jQuery code doesn't affect them in any way
Is it possible to change a link to "active" without add/removing a class? The problem i´ve got is, that my other script will not work if the "a"-tag will be changed for example to "a.active".
So this way works for the link, but not for my other script ;(, because a class will be add and remove.
<script>
$(function(){
$('.mydiv a').click(function(){
$('.mydiv .active').removeClass('active');
$(this).addClass('active');
});
});
</script>
Can anybody help me?
UPDATE 2
Thats the script I work with:
http://jsfiddle.net/7n2d4b44/2/
Use data-* attributes to hold data, don't use class names as data. You can use the jQuery .data method to get the value of a data-* attribute.
var sliding = $('.sliding_div');
var divWords = $('.sliding_div p');
$('.links a').click(function () {
//pass .data the name after the `data-` part in the attribute name
var c = '.' + $(this).data("filter"); // get name to filter classes and make it as a CSS selector
divWords.hide().filter(c).show(); // hide all words,
// filter to get the ones with class like the clicked link
// show the filtered ones
//You could move this to its own handler
//$(".links a.close).click(...)
c === '.close' ? sliding.hide() : sliding.show();
// if c is .close show the sliding_div else hide it
$(".links .active").removeClass("active");
$(this).addClass("active");
});
.links {
width: 60px;
float: left;
}
.sliding_div {
padding:10px;
width: 200px;
float: right;
background-color:#ccc;
display:none;
}
.sliding_div div {
display:none;
}
.active{
color:#F00;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="links">
<a href="#" data-filter='one'>Link 1</a>
<a href="#" data-filter='two'>Link 2</a>
<a href="#" data-filter='three'>Link 3</a>
<a href="#" data-filter='close'>Close</a>
</div>
<div class="sliding_div">
<p class='one two three'>House</p>
<p class='one two three'>Cat</p>
<p class='one'>Dog</p>
<p class='three'>Car</p>
<p class='one two'>Man</p>
</div>
You could use the CSS pseudo-class I think like:
a:active { color: lime }
More info CSS :active pseudo-class
The $(this).addClass('active'); should append so the element should have 2 classes. The other class should not be removed. You can double check.
In your case, it could be that your function to access the other class is not coded correctly
I made a few changes, but you should now be able to add your code to use the active class, without worrying about this bit...
css
.links {
width: 60px;
float: left;
}
.sliding_div {
padding:10px;
width: 200px;
float: right;
background-color:#ccc;
}
.sliding_div p {
display:none;
}
html
<div class="links">
<a href="#" data-link='one'>Link 1</a>
<a href="#" data-link='two'>Link 2</a>
<a href="#" data-link='three'>Link 3</a>
Close
</div>
<div class="sliding_div">
<p class='one two three'>House</p>
<p class='one two three'>Cat</p>
<p class='one'>Dog</p>
<p class='three'>Car</p>
<p class='one two'>Man</p>
</div>
Javascript
var sliding = $(".sliding_div");
var divWords = $(".sliding_div p");
$(".links a").click(function (e) {
e.preventDefault();
divWords.hide();
sliding.find("." + $(this).data("link")).show();
});
jsfiddle example...
http://jsfiddle.net/7n2d4b44/7/
I there a way in javascript to make the page jump to a specific location on the page, such as
<span id='jump_to_this_location'></span>
I do not want to re=load page,
2020 Answer
A simple and modern way to do this would be like this:
document.getElementById("jump_to_this_location").scrollIntoView({behavior: 'smooth'});
The behaviour: 'smooth' argument makes the jump... well... smooth. Which is something probably most of you want.
You can set the location.hash property, like this:
window.location.hash = "jump_to_this_location";
You can give it a try here.
If you use jQuery it's pretty simple here is some sample code
Bellow is the #nav where I stored all the clickable links to the articles in this example
Note: I used the goto attribute(custom) to pass the ID for the target Article
<div id='nav'>
<div goto='text1'>Link To Text 1</div>
<div goto='text2'>Link To Text 2</div>
</div>
Here, bellow are the Articles you will be jumping to.
Note: The JavaScript in the last code sample takes the distance of the tag to the top of that page and then scrolls the page down by that same distance measurement taken.
<div id='articles_container'>
<article>
<h1 id='text1'></h1>
<p>
Sample article Paragraph 1
</p>
</article>
<article>
<h1 id='text2'></h1>
<p>
Sample article Paragraph 2
</p>
</article>
</div>
Finally this is the javascript + jQuery that makes it all work, this solution is best when you are working with fixed and layered components.
<script>
$(document).ready(function(){
$('#nav div').click(function(){
var id = "#" + $(this).attr('goto');
var top = $(id).position().top;
$('html').scrollTop(top);
});
});
</script>
javascript jquery
This can be accomplished by first creating an anchor for the page landing spot using HTML.
<a name="jumpHere">somewhere</a>
Once you have the landing site, simply use the JavaScript:
window.location = 'yoursite.html#jumpHere';
I realize this question is five years old, but people still find it, and it seems a shame no one has ever answered it...
Specifically "Without Reloading Page" as asked,
and where there is a name="HERE" or id="HERE" label somewhere in the html ("HERE" is of course an example of any label),
then Javascript can do:
if (navigator.userAgent.match(/Chrome|AppleWebKit/)) {
window.location.href = "#HERE";
window.location.href = "#HERE"; /* these take twice */
} else {
window.location.hash = "HERE";
}
Works for me.
You don't need JS for that.
Accessing yourpage.html#jump_to_this_location will do. This can be done through a link (jump)
The rough sketch illustrates using the id attribute in element section to jump to different parts of the page using the anchor in navigation. That is, in your navigation:
<li></li>
<!DOCTYPE html>
<html>
<head>
<title>Go to section</title>
<style type="text/css">
.navigation {
position: fixed;
background-color: green;
width: 100%;
height: 50px;
margin-top: 0px;
margin-right: 0px;
}
.navigation li {
display: inline;
width: auto;
list-style-type: none;
font-size: 20px;
text-decoration: none;
}
a:hover, {
background-color: white;
}
a: focus {
color: lime;
}
</style>
</head>
<body>
<nav>
<ul class="navigation">
<li>About US</li>
<li>Our clients</li>
<li>Our Offices</li>
<li>Projects</li>
<li>The team</li>
<li>Contact US</li>
</ul>
</nav>
<section id="about">
<div class="about" style="background-color: skyblue; height: 500px;">
</div>
</section>
<section id="clients">
<div class="clients" style="background-color: blue; height: 500px;">
</div>
</section>
<section id="branches">
<div class="branches" style="background-color: lime; height: 500px;">
</div>
</section>
<section id="samples">
<div class="samples" style="background-color: olive; height: 500px;">
</div>
</section>
<section id="team">
<div class="about" style="background-color: grey; height: 500px;">
</div>
</section>
<section id="contacts">
<div class="about" style="background-color: gold; height: 500px;">
</div>
</section>
</body>
</html>
Along with the "#", you might want this CSS attribute: This one "jumps" to the target:
scroll-behavior: auto;
This one smoothly scrolls the screen until it gets to the target:
scroll-behavior: smooth
Reference: https://www.w3docs.com/learn-css/scroll-behavior.html
Caution: It seems to be a relatively new feature, so it may not be available on all Browsers.
Came here trying to find out why my page (1) didn't scroll at all when going to page.com/#hash and (2) why it wasn't scrolling into the correct position when using scrollIntoView(). This solved both my issues, so someone might find it useful too:
window.addEventListener("DOMContentLoaded", () => {
const hash = window.location.hash;
window.location.hash = "";
window.location.hash = hash;
});
If this still doesn't scroll into the correct position then I think that adding a timeout before setting the hash again could do the trick, though I'm not 100% sure on that, someone might be able to correct me here.
Try this (using JavaScript):
location.hash = "div-Name";
How does one style links for the current page differently from others? I would like to swap the colors of the text and background.
HTML:
<ul id="navigation">
<li class="a">Home</li>
<li class="b">Theatre</li>
<li class="c">Programming</li>
</ul>
CSS:
li a{
color:#A60500;
}
li a:hover{
color:#640200;
background-color:#000000;
}
With jQuery you could use the .each function to iterate through the links with the following code:
$(document).ready(function() {
$("[href]").each(function() {
if (this.href == window.location.href) {
$(this).addClass("active");
}
});
});
Depending on your page structure and used links, you may have to narrow down the selection of links like:
$("nav [href]").each ...
If you are using URL parameters, it may be necessary to strip these:
if (this.href.split("?")[0] == window.location.href.split("?")[0]) ...
This way you don't have to edit each page.
a:active : when you click on the link and hold it (active!).
a:visited : when the link has already been visited.
If you want the link corresponding to the current page to be highlighted, you can define some specific style to the link -
.currentLink {
color: #640200;
background-color: #000000;
}
Add this new class only to the corresponding li (link), either on server-side or on client-side (using JavaScript).
It is possible to achieve this without having to modify each page individually (adding a 'current' class to a specific link), but still without JS or a server-side script. This uses the :target pseudo selector, which relies on #someid appearing in the addressbar.
<!DOCTYPE>
<html>
<head>
<title>Some Title</title>
<style>
:target {
background-color: yellow;
}
</style>
</head>
<body>
<ul>
<li><a id="news" href="news.html#news">News</a></li>
<li><a id="games" href="games.html#games">Games</a></li>
<li><a id="science" href="science.html#science">Science</a></li>
</ul>
<h1>Stuff about science</h1>
<p>lorem ipsum blah blah</p>
</body>
</html>
There are a couple of restrictions:
If the page wasn't navigated to using one of these links it won't be
coloured;
The ids need to occur at the top of the page otherwise the
page will jump down a bit when visited.
As long as any links to these pages include the id, and the navbar is at the top, it shouldn't be a problem.
Other in-page links (bookmarks) will also cause the colour to be lost.
JavaScript will get the job done.
Get all links in the document and compare their reference URLs to the document's URL. If there is a match, add a class to that link.
JavaScript
<script>
currentLinks = document.querySelectorAll('a[href="'+document.URL+'"]')
currentLinks.forEach(function(link) {
link.className += ' current-link')
});
</script>
One Liner Version of Above
document.querySelectorAll('a[href="'+document.URL+'"]').forEach(function(elem){elem.className += ' current-link'});
CSS
.current-link {
color:#baada7;
}
Other Notes
Taraman's jQuery answer above only searches on [href] which will return link tags and tags other than a which rely on the href attribute. Searching on a[href='*https://urlofcurrentpage.com*'] captures only those links which meets the criteria and therefore runs faster.
In addtion, if you don't need to rely on the jQuery library, a vanilla JavaScript solution is definitely the way to go.
a:link -> It defines the style for unvisited links.
a:hover -> It defines the style for hovered links.
A link is hovered when the mouse moves over it.
include this! on your page where you want to change the colors save as .php
<?php include("includes/navbar.php"); ?>
then add a new file in an includes folder.
includes/navbar.php
<div <?php //Using REQUEST_URI
$currentpage = $_SERVER['REQUEST_URI'];
if(preg_match("/index/i", $currentpage)||($currentpage=="/"))
echo " class=\"navbarorange/*the css class for your nav div*/\" ";
elseif(preg_match("/about/*or second page name*//i", $currentpage))
echo " class=\"navbarpink\" ";
elseif(preg_match("/contact/* or edit 3rd page name*//i", $currentpage))
echo " class=\"navbargreen\" ";?> >
</div>
N 1.1's answer is correct. In addition, I've written a small JavaScript function to extract the current link from a list, which will save you the trouble of modifying each page to know its current link.
<script type="text/javascript">
function getCurrentLinkFrom(links){
var curPage = document.URL;
curPage = curPage.substr(curPage.lastIndexOf("/")) ;
links.each(function(){
var linkPage = $(this).attr("href");
linkPage = linkPage.substr(linkPage.lastIndexOf("/"));
if (curPage == linkPage){
return $(this);
}
});
};
$(document).ready(function(){
var currentLink = getCurrentLinkFrom($("navbar a"));
currentLink.addClass("current_link") ;
});
</script>
Best and easiest solution:
For each page you want your respective link to change color to until switched, put an internal style in EACH PAGE for the VISITED attribute and make each an individual class in order to differentiate between links so you don't apply the feature to all accidentally. We'll use white as an example:
<style type="text/css">
.link1 a:visited {color:#FFFFFF;text-decoration:none;}
</style>
For all other attributes such as LINK, ACTIVE and HOVER, you can keep those in your style.css. You'll want to include a VISITED there as well for the color you want the link to turn back to when you click a different link.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head>
<style type="text/css"><!--
.class1 A:link {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 4px solid #333333; border-right: 4px solid #333333; border-top: 3px solid #333333; border-bottom: 4px solid #333333;}
.class1 A:visited {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 4px solid #333333; border-right: 4px solid #333333; border-top: 3px solid #333333; border-bottom: 4px solid #333333;}
.class1 A:hover {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 3px solid #0000FF; border-right: 3px solid #0000FF; border-top: 2px solid #0000FF; border-bottom: 2px solid #0000FF;}
.class1 A:active {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 3px solid #0000FF; border-right: 3px solid #0000FF; border-top: 2px solid #0000FF; border-bottom: 2px solid #0000FF;}
#nav_menu .current {text-decoration: none; background:#1C1C1C url(..../images/menu-bg.jpg) center top no-repeat; border-left: 3px solid #FF0000; border-right: 3px solid #FF0000; border-top: 2px solid #FF0000; border-bottom: 2px solid #FF0000;}
a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}
--></style>
</head>
<body style="background:#000000 url('...../images/bg.jpg') repeat-y top center fixed; width="100%" align="center">
<table style="table-layout:fixed; border:0px" width=100% height=100% border=0 cellspacing=0 cellpadding=0 align=center><tr>
<td style="background: url(...../images/menu_bg-menu.jpg) center no-repeat;" "border:0px" width="100%" height="100%" align="center" valign="middle">
<span class="class1" id="nav_menu">
<font face="Georgia" color="#0000FF" size="2"><b> Home </b></font>
<font face="Georgia" color="#0000FF" size="2"><b> FAQs page </b></font>
<font face="Georgia" color="#0000FF" size="2"><b> About </b></font>
<font face="Georgia" color="#0000FF" size="2"><b> Contact </b></font>
</span>
</td></tr></table></body></html>
Note: the style goes in between the head tag (<head> .... </head>) and the class="class1" and the id="nav_menu" goes in the ie: (-- <span class="class1" id="nav_menu"> --).
Then the last class attribute (class="current") goes in the hyper-link code of the link in the page that you want the active current link to correspond to.
Example: You want the link tab to stay active or highlighted when it's correspondent page is whats currently in view, go to that page itself and place the class="current" attribute by it's link's html code. Only in the page that corresponds to the link so that when ever that page is at view, the tab will stay highlighted or stand out different from the rest of the tabs.
For the Home page, go to the home page and place the class in it. example: <a href="http://Yourhomepage-url.com/" class="current" target="_parent">
For the About page, go to the about page and place the class in it. example: <a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" class="current" target="_parent">
For the Contact page, go to the contact page and place the class in it. example: <a href="http://Yourhomepage-url.com/youraboutpage-url.php_or_.html" class="current" target="_parent">
etc ......
Notice the example Table above;- Lets assume this was the Home page, so on this page, only the Home url link section has the class="current"
Sorry for any meaning-less error, am not a prof. but this worked for me and displays fine in almost all the browsers tested, including ipad, and smart phones. Hope this will help some-one out here because is very frustrating to want to and not able to. I had tried so had to get to this, and so far it's good for me.
#Presto
Thanks! Yours worked perfectly for me, but I came up with a simpler version to save changing everything around.
Add a <span> tag around the desired link text, specifying class within. (e.g. home tag)
<nav id="top-menu">
<ul>
<li> <span class="currentLink">Home</span> </li>
<li> About </li>
<li> CV </li>
<li> Photos </li>
<li> Archive </li>
<li> Contact</li>
</ul>
</nav>
Then edit your CSS accordingly:
.currentLink {
color:#baada7;
}
You do not need jQuery just to do this! All you need is a tiny and very light vanilla Javascript and a css class (as in all the answers above) :
First define a CSS class in your stylesheet called current.
Second add the following pure JavaScript either in your existing JavaScript file or in a separate js script file (but add script tage link to it in the head of the pages) or event just add it in a script tag just before the closing body tag, it will still work in all these cases.
function highlightCurrent() {
const curPage = document.URL;
const links = document.getElementsByTagName('a');
for (let link of links) {
if (link.href == curPage) {
link.classList.add("current");
}
}
}
document.onreadystatechange = () => {
if (document.readyState === 'complete') {
highlightCurrent()
}
};
The 'href' attribute of current link should be the absolute path as given by document.URL (console.log it to make sure it is the same)
Use single class name something like class="active" and add it only to current page instead of all pages. If you are at Home something like below:
<ul id="navigation">
<li class="active">Home</li>
<li class="">Theatre</li>
<li class="">Programming</li>
</ul>
and your CSS like
li.active{
color: #640200;
}
You can add an id in addition to the class name. Styles referring to the id will override the styles referring to the class. You might call the id: #active and add it to the link of the html page you are currently on:
HTML of href="/" (Home):
<ul id="navigation">
<li id="active "class="a">Home</li>
<li class="b">Theatre</li>
<li class="c">Programming</li>
</ul>
Css:
li a{
color:#A60500;
}
li a:hover{
color:#640200;
background-color:#000000;
}
#active {
color:#640200;
background-color:#000000;
}
So for example if you are trying to change the text of the anchor on the current page that you are on only using CSS, then here is a simple solution.
I want to change the anchor text colour on my software page to light blue:
<div class="navbar">
<ul>
<li>Home</li>
<li>Useful Sites</li>
<li class="currentpage">Software</li>
<li>The Workbench</li>
<li>Contact</li></a>
</ul>
</div>
And before anyone says that I got the <li> tags and the <a> tags mixed up, this is what makes it work as you are applying the value to the text itself only when you are on that page. Unfortunately, if you are using PHP to input header tags, then this will not work for obvious reasons.
Then I put this in my style.css, with all my pages using the same style sheet:
.currentpage {
color: lightblue;
}