Jump to content
Please Use CODE Tags

HTML/CSS add class to link when it's pressed?

Flanelman
By Flanelman
in Programming
 Share
Posted

I don't know if it's really possible to add a class tag to a link when it's pressed or not but let me walk you through what I want to do.

So, when the user presses a link, I want the link to change color until another is pressed, at which point I want the first link to look like it did before it was pressed with the newly pressed link taking up the changed appearance. The only way I could think about doing it was that I have a separate class within the CSS that is styled how I want the currently pressed link to look, and then that is applied on the most recently pressed link but I'm unsure of how to actually know and dynamically change the appearance of the link when it's pressed. If anyone can help achieve this I would appreciate it greatly. 

 

EDIT: Thought, Would I be able to when the link is click include style coding to change the link appearence? for example something like this: 

<body>
<div id="nav">
      <ul>
              <li><a href="?link=1" class = "link1_clicked" name="link1" onclick="return false">HOME</a></li>
              <li><a href="?link=2" class = "link2_clicked" name="link2" onclick="return false">SEARCH</a></li>
              <li><a href="?link=3" class = "link3_clicked" name="link3" onclick="return false">DATABASE</a></li>
        </ul>
</div>

<?php
    if(isset($_GET['link'])){
    $link=$_GET['link'];
      if ($link == '1')
      {
        <style>
			a.link1_clicked {color: #fff;}
			a.link2_clicked a.link2_clicked {color: #000;}
	</style>
      } ?>
</body>



Thanks in advance! :)

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

give every link the same class name

on every link OnClick() execute a function that  gets an array made up of the link class; turns every link into the style you want; then changes the link that was clicked.

Unless you are expecting to use a million links then complete traversal of an array of links should not be a problem.

pretty simple if i understand what you want to do.

             ☼

ψ ︿_____︿_ψ_   

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author

Yeah there's only 3 links I'm using atm so that should be fine, it sounds like that is what I'm after. 

 

Quote

on every link OnClick() execute a function that  gets an array made up of the link class; turns every link into the style you want; then changes the link that was clicked.

 

You don't happen to have any examples of how to do this do you? I'm not so good outside of HTML/CSS, is this possible to do in PHP?

Link to comment
Share on other sites
Link to post
Share on other sites
Posted

I think you are trying to do this more difficult then it needs to be. What you are describing sounds like something as a navigation bar.

Those just work with the active / visited ect. links

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
1 hour ago, Flanelman said:

You don't happen to have any examples of how to do this do you? I'm not so good outside of HTML/CSS, is this possible to do in PHP?

this is UI stuff so it has to be javascript.

There might be something in CSS I havnt considered.

this gets you the array of objects by class name.

document.getElementsByClassName("tag_name");

then you just iterate over the array changing the class or style.

 

             ☼

ψ ︿_____︿_ψ_   

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
2 hours ago, Dujith said:

I think you are trying to do this more difficult then it needs to be. What you are describing sounds like something as a navigation bar.

Those just work with the active / visited ect. links

i agree what's wrong with using css?

  


a:visited{
color: pink;
}

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
  • Author
1 hour ago, vorticalbox said:

i agree what's wrong with using css? 


a:visited{
color: pink;
}

 

 

 

I only want the page im currently on's appearence to be changed, whereas this will change them all if I visit them all.

 

for example I have 3 links at the top, when I press home I want the home link to change colour, then when I press the search link I want search to change colour and for home to go back to it's default (what it was before it was pressed).

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
3 hours ago, SCHISCHKA said:

this is UI stuff so it has to be javascript.

You are awfully wrong.

  

<?php
// this is foo.html
$activepage = "foo.html";

// ...

// this could be written as a include() file to reduce redundancy:
echo "<nav>";
echo "<ul>";
echo "<li class=\"" . ($activepage == "foo.html" ? "active" : "") . "\"><a href=\"foo.html\">foo</a></li>";
echo "<li class=\"" . ($activepage == "bar.html" ? "active" : "") . "\"><a href=\"bar.html\">bar</a></li>";
echo "<li class=\"" . ($activepage == "baz.html" ? "active" : "") . "\"><a href=\"baz.html\">baz</a></li>";
echo "</ul>";
echo "</nav>";
?>

 

No Javascript involved.

Write in C.

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
4 hours ago, Dat Guy said:

You are awfully wrong.

  


<?php
// this is foo.html
$activepage = "foo.html";

// ...

// this could be written as a include() file to reduce redundancy:
echo "<nav>";
echo "<ul>";
echo "<li class=\"" . ($activepage == "foo.html" ? "active" : "") . "\"><a href=\"foo.html\">foo</a></li>";
echo "<li class=\"" . ($activepage == "bar.html" ? "active" : "") . "\"><a href=\"bar.html\">bar</a></li>";
echo "<li class=\"" . ($activepage == "baz.html" ? "active" : "") . "\"><a href=\"baz.html\">baz</a></li>";
echo "</ul>";
echo "</nav>";
?>

 

No Javascript involved.

you're using php, op hasn't said they are this this might never work.

 

ideal situation would be pure css or js so the client handles the ui and not the server, this reduces server and keeps to single responsibility.

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
51 minutes ago, Dat Guy said:

OP also asked "is this possible in PHP?". 

didn't see my bad, it depends on how the page works, if pressing link shows new content but doesn't change page then php wouldn't work. 

 

 

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
18 minutes ago, Dat Guy said:

That would involve Javascript.

I'm sure you could use my css but to an id, that way you could handle how each one looks after being clicked. 

                     ¸„»°'´¸„»°'´ Vorticalbox `'°«„¸`'°«„¸
`'°«„¸¸„»°'´¸„»°'´`'°«„¸Scientia Potentia est  ¸„»°'´`'°«„¸`'°«„¸¸„»°'´

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
10 hours ago, Dat Guy said:

You are awfully wrong.

  


<?php
// this is foo.html
$activepage = "foo.html";

// ...

// this could be written as a include() file to reduce redundancy:
echo "<nav>";
echo "<ul>";
echo "<li class=\"" . ($activepage == "foo.html" ? "active" : "") . "\"><a href=\"foo.html\">foo</a></li>";
echo "<li class=\"" . ($activepage == "bar.html" ? "active" : "") . "\"><a href=\"bar.html\">bar</a></li>";
echo "<li class=\"" . ($activepage == "baz.html" ? "active" : "") . "\"><a href=\"baz.html\">baz</a></li>";
echo "</ul>";
echo "</nav>";
?>

 

No Javascript involved.

This is not what OP asked.

             ☼

ψ ︿_____︿_ψ_   

Link to comment
Share on other sites
Link to post
Share on other sites
Posted
14 hours ago, Flanelman said:

I only want the page im currently on's appearence to be changed, whereas this will change them all if I visit them all.

 

for example I have 3 links at the top, when I press home I want the home link to change colour, then when I press the search link I want search to change colour and for home to go back to it's default (what it was before it was pressed).

If this is a single page website, I would suggest using something like CSS tabs

 

If each link brings you to a completely different page, then the browser no longer has any state of what happened before so you're going to have to mark it manually.

 

EDIT: Actually I found out the CSS tabs link uses JavaScript too. I have a method of doing tab based navigation purely in CSS.

I have a blog! And a list of guides I've posted

Link to comment
Share on other sites
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing Programming

×