Catch URL link and modify CSS

Question

Catch URL link and modify CSS

Navigation

#1 by (1 votes)
#2 by (0 votes)

1

I'd like to take the URL link and thereby modify the property of class flechaSubmenu from display:none to display:block . I thought of doing with CSS:

.classe a[href^="/categoria/categoria2/"] {
    display:block;
}

What happens, is that the link would have to be in a div that is not the case.

In short, I want the arrow on my site to point to the current Menu where I am.

My HTML:

<li>
    <a href="/pt/page/investidores">
        <span>Investidores</span>
        <div class="flechaSubmenu"></div>
    </a>
</li>

JQuery:

$(document).ready(function(){
    $("div.flechaSubMenu[href='/pt/page/investidores']").addClass("flechaI");
});

CSS:

.flechaI {display: block!important;}

jquery css

asked by anonymous 14.01.2015 / 14:15

2 answers

0

Try to use the code below, do not forget how important jQuery is before this script. I do not understand the CSS line from display:block to class flechaI because I did not find this class in your code anyway, do not apply any CSS with display property to the flechaSubmenu class. >

If I understand right, you want to apply this according to the URL, in case it would be this code below:

<script>
$(document).ready(function () {
$('.flechaSubmenu').hide();
  if(window.location.href.indexOf("/categoria/categoria2/") > -1) {
    $('.flechaSubmenu').show();
  }
});
</script>

If you want to validate with href parent a , do this:

<script>
 $(document).ready(function () {
   $("a").each(function () {
    if ($("a").attr("href") == "/categoria/categoria2") {
      $(this).find(".flechaSubmenu").show();
    } else {
      $(this).find(".flechaSubmenu").hide();
    }
   });
 });
</script>

14.01.2015 / 14:44

Handle event with JQuery when form and link are generated automatically Problems with the wp_mail () function; of wordpress

score 1 · Accepted Answer

Using the code you posted, I was able to apply display: block to div with the following jQuery code :

$( "a[href='/pt/page/investidores']" ).find( ".flechaSubmenu" ).css( "display", "block" );

Explanation:

$("a[href='/pt/page/investidores']") - will select all links that redirect to the page in question.
find(".flechaSubmenu") - takes the descendants of the link that have the class flechaSubmenu .
css( "display", "block" ) - applies the display: block; property on the element selected by find () , this way you can dispense the second class flechaI .

If you want to use the class flechaI , just change the .css() to .removeClass("flechaSubmenu").addClass("flechaI"); or something similar.