How to change color of div on link click and then when other link is clicked, another div changes color, previous is set to default color
Question
I have a link that lieds me to specific <div> on my page. This is a page content. When i click on link, send me to specific place on my page (title of table). I'd like, that when i click on that link, the <div> (title of table) is colored red. Then when i click on another link (another <div> and another title of table) previous <div> is colored back in black and new <div> is colored red...etc.
This is my code so far:
<html>
<body>
<table>
<tr>
<button onclick="SetAllTitleColorToBlack()">Refresh page</button>
<td>
<div id="kazalo" height="50" style="padding-left:25; font-size:16px"> <b><u>Page content:</u></b>
<b><ul>
<li> <a href="#one"> link to one </a></li>
<li> <a href="#two"> link to two </a></li>
<li> <a href="#three"> link to three </a></li>
<li> <a href="#four"> link to four </a></li>
<li> <a href="#five"> link to five </a></li>
</ul></b>
</div>
</td>
<script> <!-- script, da kazalo strani sledi strani, če gremo dol, gre tudi kazalo dol -->
$(window).scroll(function () {
$('#kazalo').stop().animate({
'marginTop': $(window).scrollTop() + 'px',
'marginLeft': $(window).scrollLeft() + 'px'
}, 'slow');
});
var totaltext = '';
for (var i = 0; i < 100; i++) {
if (window.CP.shouldStopExecution(1)) {
break;
}
totaltext += 'scroll!<br />';
}
window.CP.exitedLoop(1);
$('#div2').html(totaltext);
</script>
<td style="padding-left:50">
<div id="one"> one </div>
<div id="two"> two </div>
<div id="three"> three </div>
<div id="four"> four </div>
<div id="five"> five </div>
</td>
</tr>
</table>
</body>
</html>
So when i click on "link to one" page moves me to <div> with id="one" and title "one" must be colored red. If i click now on "link to three" , page moves me to <div> with id="three" and title "three" must be colored red, title "one" must be colored in default color, so black in this case.
I also need a refresh button, when i click on this button, all colors of titles are set to default (black) color.
Thanks for or the help
2 answers
solution1
1 ACCPTED 2015-04-08 08:31:16
You can just do:
div:target {
color:red;
}
to color divs when clicked with css.
For reset you could just make a empty link <a href="#"> reset </a>
Here is a working example.
solution2
0 2015-04-08 08:35:51
You could add / remove an class (active for example) to the specific div. The example below shows this - you would however need to make some minor changes.
First Part
<li> <a class="navLink" href="#one"> link to one </a></li>
<td id="myContent" style="padding-left:50">
<div id="one"> one </div>
<div id="two"> two </div>
<div id="three"> three </div>
<div id="four"> four </div>
<div id="five"> five </div>
</td>
Javascript
<script>
$('.navLink').click(function() {
$(".active").removeClass("active");
$($(this).attr('href')).addClass("active");
});
</script>
Css
<style>
.active { background-color: rgba(0,0,0,0.5); }
</style>
Working fiddle:
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.