Find current page and change Div style

Asked

Viewed 868 times

0

I have a div which is repeated 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, I want when I click on the product category, the menu color change, to red, for example.

You can do that with Jquery?

jquery

  • Can you post your full code? your html with menus and content.

  • This is the HTML friend. It’s inside a loop. That is, this div that I posted above, repeated five times.

4 answers

1


Yes! There are options in jQuery to add a class to the element (.addClass() link) or directly a CSS (.css() link).

The solution would be to add a specific id or class for each element used and then configure these events with jQuery:

$('#categoriacamisetas').click(function(){
   $('menucamisetas').css({"background-color":"red"});
});

Or...

Create a class with the desired styles for each class, p.e. .estilocamiseta and then via jQuery, add this style (via class) to the menu when the category is selected:

$('#categoriacamisetas').click(function(){
   $('menucamisetas').addClass("estilocamiseta");
});

About finding out which page I’m on: You can add a variable to take the path current: var local = window.location.pathname; and then configure events through conditions. On this page, for example, var returns /questions/25815/discover-page-current-and-change-div-style.

I hope I added. Hug.

  • 1

    Thank you very much! : ) He applied the color I determined after I clicked, however, when the page loads the other product listing, referring to the loaded menu, it is normal without the applications. Should I use an attribute?

  • This event I mentioned is only activated at the click step. Try to put a Handle through conditions: if I am on the /contact page, add the class or CSS to the menu. I will try to play here.

  • 1

    Done: http://jsfiddle.net/b2nT5/2/

  • It became difficult to perform because Jsfiddle uses a iframe. Upon entering, you will come across a Alert but nothing should happen. Click on 'Run' and see the magic. The logic is you take the link current and set conditions. If the link be such, do what you want.

  • Of course the script will not run after a Alert on your website. That’s why the style was added after closing this alert: the program only continued running after closing.

  • Thank you for your attention. That would be it? http://jsfiddle.net/felipestoker/85p28/

  • /paginaSYS or /paginaSYS/? http://jsfiddle.net/85p28/1/

  • I tried both ways, hehe.

  • 1

    Hahahaha. Then read the Obs. I made in Jsfiddle ;p

  • Ah, ball show. The problem with me creating an ID is that this div is in a loop loop, I’m going to try incrementing, to assign a number to the ID.

  • Right. If the answer solved your problem, mark it as the answer ;P - I will search for loops and ids assignment.

Show 6 more comments

1

I won’t give you a kiss, just think a little, but follow an example of how to do:

Before:

Antes

html:

<header>
    <ul class="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;
}

Link in jsfiddle

Each page load this script runs and compares the href of each menu link to the current page URL.

Note that the jsFiddle example won’t work because you can’t really change the URL in the results window, but you can easily copy the code to an HTML file to test it.

Afterward:

Depois

1

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>

  • Hello Ana. I had done so, what happens is that after the click, there is page loading.

0

I 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>

Browser other questions tagged jquery

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