Is there a way where I can also have class="active" in

  • .
    But it's only going to be on the selected tab.

    Here is an example:

    <ul class="viewsdisplaytabs-tab-group">
<li class="first active">
<a class="viewsdisplaytabs-tab active viewsdisplaytabs-active viewsDisplayTabs-processed" rel="page_1" href="/b%C3%B6rn">Börn</a>
</li>
<li>
</li>
<li class="last">
</li>
</ul>

    • Comments

    Metalviking’s picture

    Metalviking commented

    Sorry it should be

    Is there a way where I can also have class="active" in <li>

    But it's only going to be on the selected tab.

    Here is an example:

    <ul class="viewsdisplaytabs-tab-group">
<li class="first active">
<a class="viewsdisplaytabs-tab active viewsdisplaytabs-active viewsDisplayTabs-processed" rel="page_1" href="/b%C3%B6rn">Börn</a>
</li>
<li>
</li>
<li class="last">
</li>
</ul>
    solipsist’s picture

    solipsist commented

    I intentionally chose not to set the 'active' class as it's used for active navigation menu links in Drupal and adding it to the VDT LI tags would just look weird in lots of themes. Why can't your theme use the classes provided by VDT?

    Metalviking’s picture

    Metalviking commented

    I need it on the li tag, because I am trying to do something similar like alistapart.

    http://www.alistapart.com/d/slidingdoors/v1/ex4.html

    I only said .active, because there is a active class in a href.

    I am want to use .current for the tab that is selected.

    aloyr’s picture

    aloyr commented
    Status: Active » Needs review

    hey, franso, how about using a bit of jquery to add the class to that li element? try the code below... i am assuming the VDT creates an anchor with the class "viewsdisplaytabs-active" for active items and that you want the li element to have the "current" class, if not, you can just change those class names. this would prevent having to change the module itself.

      $(document).ready(function(){
    $("li:has(a.viewsdisplaytabs-active)").addClass("current");
  });
    Metalviking’s picture

    Metalviking commented

    Thank you, I have tried using jquery.

    It only works on the first tab when the page loads.

    I have three tabs and when I click on the second tab nothing happens, I think this because there is no reloading.

    aloyr’s picture

    aloyr commented

    ok, lemme get the module installed locally so i can see what you are working with. also, if you have an url that is accessible that could help too.

    solipsist’s picture

    solipsist commented

    You have to implement it as a behavior, otherwise it won't run every time a tab is clicked:
    http://drupal.org/node/114774#javascript-behaviors

    Metalviking’s picture

    Metalviking commented

    Thank you all,

    It's working now.

    Here is the code that I am using:

    <script>
Drupal.behaviors.addCurrent = function (context) {
 $('li:has(a.viewsdisplaytabs-active)', context).addClass('current');
  };
</script>
    solipsist’s picture

    solipsist commented
    Status: Needs review » Closed (fixed)

    Call drupal_add_js() from template.php and this piece of JavaScript will be rolled with all the other scripts when Drupal creates the aggregated JS file:
    http://api.drupal.org/api/search/6/drupal_add_js