/    Sign up×
Community /Pin to ProfileBookmark

Creating a visited link in the nav section of a one page site

Copy linkTweet thisAlerts:
Oct 05.2010

Anyone know how I can change the color of a text link on a page that doesn’t load a new page, but rather stays on the same page?

The nav links already use an onClick to present content below it that changes depending on what link in the nav I select. In other words, there’s already two things going on — links take you to content on the same page using a JS onClick.

What I want to add to that is when you click on the link, it changes style, like turns bold or changes color. So then the user knows that not only have they selected new content, but the link they selected stands out as well.

Thank you,
S

to post a comment
JavaScript

1 Comments(s) ↴

Copy linkTweet thisAlerts:
@holyhttpOct 05.2010 — You could give each one of those links an ID then include the id value as a parameter of the click handler. For instance:

<a href="#here" onclick="ShowSection('section1", 'link1') id="link1">Anchor Text</a>

In your JavaScript function:

function Showsection(pagesection, clickedlink){

/*


whatever the function does to the page content

*/

document.getElementById(clickedlink).style.color="#FF0000";

}

Of course if there is a unique correspondence between the "pagesection" parameter and the clicked link then only one parameter should suffice. You can extract the link ID knowing what section is called to be displayed. Otherwise the logic shown above is a simplistic way of getting the results you are seeking.
×

Success!

Help @spabman spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.28,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...