Using active menu as input "radio"

Asked

Viewed 30 times

0

I’m using a horizontal menu of boostrap, its structure is basically like this:

<ul class="nav nav-pills">
  ...
  <li data-type="news" id="5" role="presentation"><a href="#">Link</a></li>
  <li data-type"sports" id="4" role="presentation"><a href="#">Link2</a></li>
  ...
</ul>

The idea is to click on each menu to call a jquery function to bring results with ajax and also activate the menu, if this structure were a list of inputs of type "radio" would be more practical and fast to pick all attributes, it is possible, when selecting the menu, to mark the input "radio" hidden referring to this menu?

javascript jquery html css

1 answer

1

I believe that making this link between the Buttons radios and the menu will cause more work, it will take events to keep both synchronized etc...

Honestly I don’t see why create this scheme with the radios Buttons, what you could do is create an event of click generic for all menu items, and from there access the attributes and call the ajax.

To access the attribute data-type for example, it would be like this:

$("ul.nav li").click(function(e){
    var dataType = $(e.currentTarget).attr('data-type');
    //...
});

  • Do I understand, in that case, what is the best way to activate the menu? would be something like a class, as I would remove it from the previous menu?

  • 1

    @NGTHM4R3 Exactly, adding a class would fulfill this function, you can create something like: By clicking on the menu item, remove the class active(for example) of all items and then add the class only to the item that was clicked. ex: $("ul.nav li").removeClass( "active" );, probably these methods will help you: removeClass,addClass,hasClass

Browser other questions tagged javascript jquery html css

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