JOIN DEVPPL

It looks like you are new here. If you want to get involved, click on Join below!



Re: styling internal links?

This post is from the topic: styling internal links?





R

keyboard_arrow_up
0
keyboard_arrow_down


Post #67623 Mark as Spam rajmv
Posts: 103 - Registered: 2011-07-14 02:22:09

You can, with some js and some css;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.content {
height : 500px;
border : 1px solid black;
margin : 5px;
}



body.one {
background : white;
color : black;
}



body.two {
background : yellow;
color : black;
}



body.three {
background : blue;
color : lime;
}

body.three #one {
background : green;
color : black;
}
</style>

<script type="text/javascript"><!--
function go (selectedDiv) {
document.getElementsByTagName('body')[0].className = selectedDiv;
}
--></script>
</head>

<body onload="">
<div id="menu" class="menu">
<a href="#one" onclick="go('one')">one</a><br/>
<a href="#two" onclick="go('two')">two</a><br/>
<a href="#three" onclick="go('three')">three</a><br/>
</div>

<div id="one" class="content">
1 : Lorem Ipsum!
</div>

<div id="two" class="content">
2 : Lorem Ipsumia
</div>

<div id="three" class="content">
3 : Lorem Ipsumio
</div>

<div id="four" class="content">
4 : Lorem Ipsumius
</div>
</body>
</html>


link "one" is plain white and black as usual, links "two" and "three" have seperate styling applied to the entire body. link "three" also has an override of colors on the content of div #one, as an example of how to style different elements differently per link.



JOIN DEVPPL

It looks like you are new here. If you want to get involved, click on Join below!




MENU
Advertising