Keep hover effect, when clicking on the link (active)

Navigation
1

I have a <aside> and inside it a ul>li (menu) structure as per the code below, I would like to click on the item and redirect the page of it the same menu would be selected with the effect of the hover and that the signal of + stay - ...

I tried to use css :target but it did not work very well because I would have to use #nome-page and it ended up not rolling .. so I wanted to know via jquery what better way to do ... follow the code and the image .. . 

@import "../main";

.aside
{
	width: 100%;
	max-width: 290px;
	position: relative;
	margin-top: 90px;
	padding-right: 15px;
	float: left;
	
	.aside-bg
	{
		background-color: #cac5b0;
		max-width: 275px;
		width: 100%;
		padding: 15px 0 10px 0;
		margin-bottom: 30px;
	}
	.aside-bg:last-child
	{
		padding: 15px;
	}
	.aside-bg:last-child ul li 
	{
		width: 100%;
		background-color: #fff;
		padding: 10px;
		&:hover
		{
			background-color: #fff;
		}
	}
	.aside-bg:last-child ul li a
	{
		font-family:'Optimist';
		@include font-size(22);
		color: #061f5c;
		text-transform: uppercase;
		letter-spacing: 1px;
	}
	.aside-bg:last-child ul span
	{
		padding: 10.5px;
		color: #fff;
	}
	.aside-bg ul 
	{

	}
	.aside-bg ul li
	{
		width: 105%;
		background-color: #061f5c;
		padding: 18.5px;
		margin-bottom: 25px;
		position: relative;
		&:hover
		{
			background-color: #ff5800;
		}
	}
	.aside-bg ul li:target
	{
		background-color: #ff5800;
	}
	.aside-bg ul li:last-child
	{
		margin-bottom: 0;
	}
	.aside-bg ul li a 
	{
		font-family:'Optimist';
		@include font-size(24);
		color: #fff;
		text-decoration: none;
	}
	.aside-bg ul li a span
	{
		position: absolute;
		top: 0;
		right: 0;
		padding: 19px 25px;
		background-color: #ff5800;
	}
	.aside-bg h2
	{
		font-family:'Optimist';
		@include font-size(35);
		color: #0a2677;
		width: 100%;
		text-align: center;
		margin: 0;
	}
	.aside-bg img
	{
		margin-top: 25px;
		margin-bottom: 25px;
		width: 100%;
	}
}
<aside class="aside col-xs-12 col-sm-5 col-md-5">
	<div class="aside-bg">
		<ul>
			<li class="aside-link1"><a href="formags">A FORMAG'S <span>+</span></a></li>
			<li class="aside-link1"><a href="historia">NOSSA HISTÓRIA <span>+</span></a></li>
			<li class="aside-link1"><a href="tecnologias">TECNOLOGIAS <span>+</span></a></li>
			<li class="aside-link1"><a href="sustentabilidade">SUSTENTABILIDADE <span>+</span></a></li>
		</ul>
	</div>

	<div class="aside-bg">
		<h2>Não é só impressão</h2>
		<img src="assets/img/icon-aside.png" alt="Icones">
		<ul>
			<li class="aside-link1"><a href="formags">solicite seu orçamento<span>+</span></a></li>
		</ul>
	</div>
</aside>

    
asked by anonymous 14.07.2015 / 22:09

3 answers

1

In fact, this issue can be solved simply with CSS. Because you have specific pages for each link, on each of these pages you can put a active class in the corresponding page link. So in CSS, I could do the following: 

.aside-link1 .active {
   /* Estilos que queira aplicar */
}
.aside-link1 .active span:after {
  content: "-";
}
.aside-link1 a span:after {
  content: "+";
}

With this, you could remove the "+" of each span you currently have on the pages.

EDIT:

Since <aside> is a component you call in pages, you will need to add the active class to Javascript. Here's a snippet of code that does this: 

var path = window.location.pathname;
if (path === "nome-da-pagina") {
  $('#idDoLink').addClass('active');
}
    
14.07.2015 / 23:29
0

14.07.2015 / 22:24
0

Put some class in the body of your page, a data-menu in the menu and read a javascript similar to this:

$ (suUlDoMenu) .each (function () {    var menu = $ (this) .data ('menu');    if ($ ('body'). is (menu)) {        $ (this) .find (a: eq (0)). addClass ('menu-active'); });

For example, Your page has a class in the body called contact, and in the date-menu of your li vc puts contact TB. If hit it picks the "a" relative to li that hit and adds the menu-active class.

I did this here on the train, who can leave the formatted answer I thank you.

    
24.11.2015 / 12:17
Show streets and images on Type Satellite by default Add event (action) when changing tab