I have a div that repeats five times:
<div class="produtosMenu f-left margin-top-35 margin-bottom-35">
<a href="/paginaSYS">tituloMenuSYS</a>
</div>
It's a list of product categories, so when I click on the product category, the color of the menu changes to red, for example.
Can you do this with Jquery ?
Yes you do! There are options in jQuery how to add a class to the element ( .addClass() link ) or directly a CSS (% with% link ).
The solution would be to add a specific id or class for each element used and then set these events with jQuery:
$('#categoriacamisetas').click(function(){
$('menucamisetas').css({"background-color":"red"});
});
Or ...
Create a class with the desired styles for each class, eg .css() and then via jQuery, add this style (via class) to the menu when the category is selected:
$('#categoriacamisetas').click(function(){
$('menucamisetas').addClass("estilocamiseta");
});
About discovering which page I am:
You can add a variable to get the current path : .estilocamiseta and then configure the events through conditions. In this page, for example, var returns / questions / 25815 / find-current-page-and-change-style-of-div
I hope I have added. Thanks.
I will not give you a kissed hand, just think a little bit, but here's an example of how to do it:
Before:
html:
<header><ulclass="nav">
<li><a href="#home">Home</a>
</li>
<li>|</li>
<li><a href="#tour">Tour</a>
</li>
<li>|</li>
<li><a href="#about">About</a>
</li>
<li>|</li>
<li><a href="#contact">Contact</a>
</li>
</ul>
</header>
JS:
$(function () {
setNavigation();
});
function setNavigation() {
var path = window.location.pathname;
path = path.replace(/\/$/, "");
path = decodeURIComponent(path);
$(".nav a").each(function () {
var href = $(this).attr('href');
if (path.substring(0, href.length) === href) {
$(this).closest('li').addClass('active');
}
});
}
CSS:
a {
color:#000;
text-decoration:none;
}
a:hover {
text-decoration:underline;
}
a:visited {
color:#000;
}
.nav {
padding:10px;
border:solid 1px #c0c0c0;
border-radius:5px;
float:left;
}
.nav li {
list-style-type:none;
float:left;
margin:0 10px;
}
.nav li a {
text-align:center;
width:55px;
float:left;
}
.nav li.active {
background-color:green;
}
.nav li.active a {
color:#fff;
font-weight:bold;
}
On each page load this script runs and compares the href of each menu link with the URL of the current page.
Note that the jsFiddle sample will not work because you can not actually change the URL in the results window, but you can easily copy the code to an HTML file to test it.
Then:
For example:
<head>
<style>
.active {
background-color: #ccc;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script><script>$(document).ready(function(){$(".menu").click(function(){
$(this).addClass("active");
});
});
</script>
</head>
<body>
<div class="menu">
primeiro
</div>
<div class="menu">
segundo
</div>
<div class="menu">
terceiro
</div>
I have decided as follows:
Jquery
var menu = window.location.toString();
$("[pagina]").each(function(index,element){
var link = $(element).attr('pagina');
if(menu.split(link).length>1){
$(element).css('color','#1D1D1B');
}
})
HTML
<li pagina="paginaSYS" class="produtosMenu f-left margin-top-35 margin-bottom-35">
<a href="/paginaSYS">tituloMenuSYS</a>
</li>