Javascript Change css when you are in a particular div

Asked

Viewed 1,207 times

0

I have on my website a white logo and a white menu, and my contact div has a white background, so these disappear. I want to know how to make a script that changes the css of the logo and menu when you’re on that div.

javascript css

3 answers

1

Can solve with CSS only:

#foo{
	background-color:#ffffff;
	width:300px;
	height:80px;
}
#foo > .logo, #foo > .menu{
	color:#000000;
}
#bar{
	background-color:#cccccc;
	width:300px;
	height:80px;
}
.logo{
	color:#ffffff;
}
.menu{
	color:#ffffff;
}
<div id="foo">
	<div class="logo">logo</div>
	<div class="menu">menu - menu - menu</div>
</div>

Do a simulation. Just swap the id "foo" for "bar" and see what happens.

<div id="foo"> swap for <div id="bar">

When it is like "bar", the logo and the menu are white because "bar" has gray background. When it’s like "foo", the logo and the menu turn black because "foo" has a white background.

This exchange effect is due to this stretch:

#foo > .logo, #foo > .menu{
    color:#000000;
}

This passage says "set black color for a dial logo and menu inside foo"

0

You can use Jquery to do this. What you need to define is the action that will change these colors, example: click, change, etc.

$('#IdLogo').css('background-color','red');
$('#IdMenu').css('background-color','blue');

  • You can do it when you’re in div #contact?

  • It can be done yes. What you need to do is set the action, example: When you click a button, take the mouse out of an element and etc.

0

Well from what I understand you use some Ajax system to upload the content of your type site "#contact", "#whomever" and etc.

Well in your case as colleagues have already said you have to add some event that reads the change, like a click or when it is changed the URL, and when it occurs do the color change, I am more the second case I find more elegant, because the exchange is linked directly to the action (in the case of the page exchange), well if that’s what I understood a pseudo code using pure Javascript would be like this: 

<script>
function changeCorContato() {
 // Pega a Âncora da URL #XXXXXX
 var hash = window.top.location.hash;

 // Pinta os div caso seja o contato
 if (hash == "#contato") {
  document.getElementById("logo").style.backgroundColor = "#FF0000";
  document.getElementById("menu").style.backgroundColor = "#0000FF";
 } else {
  // Volta a cor original caso seja outra Âncora
  document.getElementById("logo").style.backgroundColor = "#FFFFFF";
  document.getElementById("menu").style.backgroundColor = "#FFFFFF"; 
 } 
}

// "Escuta" a ação de troca de Âncora
window.addEventListener("hashchange", changeCorContato, false);
</script>

<div id="logo">Logo</div>
<div id="menu">
 <a href="#home">Home</a>
 <a href="#contato">Contato</a>
</div>

As I said this is pseudo code, you can improve as using "1 IF" single or rewrite it in jQuery or other framework of your preference.

Browser other questions tagged javascript css

You are not signed in. Login or sign up in order to post.