Take URL link and modify CSS

Asked

Viewed 1,117 times

1

I would like to take the URL link and with it, modify the class property flechaSubmenu of display:none for display:block. I thought I’d do with CSS:

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

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

In short, I want the one arrow from my site, point to the current Menu from wherever 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

  • I’m still not sure what you’re looking for. Do you want to add a CSS class when the URL is the same as the href ? or only to a href specific that you have in a string?

  • For example, when the URL is equal to /pt/page/investors to div flechaSubMenu should stay display:block (or add that class I created)

  • have that one <div class="flechaSubmenu"></div> in several li, but I want it to be active according to the URL in question.

  • Okay, so you want to read the page url and give class="flechaSubmenu" to the div who has the anchor with this href correct?

  • Exactly, it looks like my official menu HTML that contains these li http://jsfiddle.net/ps1ewtmf/

  • Have you seen this other question you asked before: http://answall.com/q/22206/129 ?

  • 1

    Dude, you’re looking for a simple menu with Current and it’s complicating everything.

  • @Rafael is not what I’m complicating, is that I don’t have much knowledge at all.

Show 3 more comments

2 answers

1


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

$( "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 property display: block; in 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() for .removeClass("flechaSubmenu").addClass("flechaI"); or something like that.

  • in case the flechaSubMenu goes before the a, right?

  • In that case he will apply the property display: block to the link independent of the class, in other words, it invalidates the property display: none and applies the display: block;.

  • Like this? $("flechaSubMenu a[href='/pt/page/investidores']").css("display", "block");?

  • Do it like this: $("a.flechaSubMenu[href='/pt/page/investidores']").css("display", "block");.

  • I modified the question and put my HTML + CSS + Jquery, based on your answer, but it didn’t work.

  • I edited the answer to the correct solution.

Show 1 more comment

0

Try to use the code below, do not forget important jQuery before this script. I don’t understand the CSS line that display:block for the class flechaI because I didn’t locate this class in your code, anyway, don’t apply any CSS property display for the class flechaSubmenu.

If I understood 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 the href parent element 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>

Browser other questions tagged jquery css

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