0

Ratchet mobile framework uses a bottom button structure that looks like this:

<nav class="bar-tab">
 <ul class="tab-inner">
<li class="tab-item active">
  <a href="#">
    <img class="tab-icon" src="img/icon-messages.png">
    <div class="tab-label">Label</div>
  </a>
</li>
<li class="tab-item">
  <a href="#">
    <img class="tab-icon" src="img/icon-hamburger.png">
    <div class="tab-label">Label</div>
  </a>
</li>
<li class="tab-item">
  <a href="#">
    <img class="tab-icon" src="img/icon-settings.png">
    <div class="tab-label">Label</div>
  </a>
</li>

I am trying to use JS to change the active tab to which ever one is clicked. The approach I am trying to take to is the following logic.

If the page that the site is on is the same as the href link then show that link active.

<script language="JavaScript">
var sPath=window.location.pathname;
 var sPage = sPath.substring(sPath.lastIndexOf('/') + 1);
$('.bar-tab li.tab-inner').click(function() {

$(".active").removeClass("active");
$(this).parent().toggleClass('active', $(this).attr('href') == sPage);

 });

 </script>

I don't want it to just be the last button clicked because there are other ways to navigate back to the major sections of the app and it will look weird to have a button showing active if the content they are looking at is completely unrelated.

Thanks for any help.

Ry-
  • 218,210
  • 55
  • 464
  • 476
bradhanks
  • 422
  • 4
  • 9

1 Answers1

0

Take a look at emberJS

  {{#link-to 'index' classNames='tab-item'}}
    <span class="icon icon-list"></span>
    <span class="tab-label">Oversigt</span>
  {{/link-to}}

With this syntax, based on the routing the current tab is set to active

user3369534
  • 125
  • 1
  • 7