First of all, block elements like divs can’t be inside of inline elements like anchors. So that’s invalid.
:active pseudo class refers to when it is in the active state, e.g. when a user clicks on the link. You can use :target?
<!DOCTYPE html>
<html>
<head>
<style>
div:target {
border: 2px solid #D4D4D4;
background-color: red
}
</style>
</head>
<body>
<a href="#here">Jump to New content 1</a>
<div id="here">This will get red background on click</div>
</body>
</html>
if you are NOT using HTML5, then having an A tag around a DIV is not valid. ( So the big question is what is your doctype? ( either way, I, personally, never wrap A’s around block elements)
There is nothing wrong with using #s for navigation; just remember they will add to your history ( this may or may not be acceptable)
for the above reason, I would stick with .js
for the question follows… where is your overviewPane() function? the onClick merely CALLs a script. If you don’t have the overviewPane() function somewhere nothing will happen.
var clickedBuffer=null;
function overviewPane(obj){
if typeOf(clickedBuffer) === null {
obj.className=‘active’;
}
else{
/* note the class name contains a black character before and after the word !! /
clickedBuffer.className.replace(’ active ‘,’');
obj.className= obj.className + ’ active ';
}
clickedBuffer=obj;
return false; / ONLY if you want the button not to lead to another HTML doc*/
}
use
.activ {} to define your clicked styles. hope that helps
1)The element .navbutton is the div in question and divs don’t have active states. Only anchors and inputs have active states. Therefore to create an active style you would address the anchor instead.
.
2) The active state is that moment that you click the element. When you release the click then it is no longer active and any styles applied will disappear.
The :focus state is when the element has been clicked and retains :focus until another element has been clicked or the page moves to a new location.
You can create a’ focusable’ element by setting a tabindex on the element but again it will only remain highlighted hwile that element is in :focus.
It sounds like you want a js solution as mentioned by Dresden above
The first part writes the content successfully; the styling does not. I hope this explains more clearly where the code stands. I haven’t encountered code #2 and #5 before, so I’m at a loss as to how to implement it.
OK, I can’t use the document.getElementById the way I have it, because it isn’t being executed as JS, but as innerhtml.
So I broke it up into two functions, with the first function making the color change and calling the innerhtml function that writes the content:
function manualsPane() {
document.getElementById('navButtonManuals').style.color='#93c2e9'; // style the button
chgButtonManuals(); // call function to write the content with innerhtml
}
This works, so I am on the right track! However, I want to change the css background-color, not the text color. Changing “color” to background-color, backgroundcolor and background_color do not work.
The answer on this page under “More Examples” (using backgroundColor) does not work for me:
Assuming that there are no more specific styles (styles that use !important) and that you are targeting the correct element then style.backgroundColor is what you need.
If you are applying a background-color then you won’t see it because your gradient will cover it up. You need to remove the gradient which can be done by using … ‘style.background =’#f00’ instead of style.backgroundColor=. The shorthand ‘background’ will set the other background properties to their default.
