Home/ Questions/Q 7639937
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-31T08:33:07+00:00

I’m trying to dynamically add a class to the active tab in the code

  • 0

I’m trying to dynamically add a class to the active tab in the code below, and it works when I run the code in jsFiddle, but not when I run it on my page. I’m not showing any errors in my console, the DOM renders the correct class, but the color is wrong. Can anyone see the error?

my page is here

my code is here:

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="../css/jquery.mobile-1.0.1.css" />
    <link rel="stylesheet" href="../css/app.css" />

    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script type="text/javascript">

    function getHandler() {
        var days = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'],
            d = new Date(),
            today = d.getDay();
        return days[today];
    }

    $(document).delegate('[data-role="navbar"] a', 'click', function() {
        $(this).addClass('ui-btn-active');
        $('.content_div').hide();
        $('#' + $(this).attr('data-href')).show();
    });

    $(document).ready(function(){
        $('[data-href="' + getHandler() + '"]').trigger('click').addClass('selected');
    });

</script>
<script src="../js/jquery.mobile-1.0.1.js"></script>
<style type="text/javascript">
    .content_div {
        display: none;
    }
    .content_div:first-child {
        display: block;
    }
    .ui-btn-active { color: #eee; }
</style>
</head>

<body>
<div data-role="page">
    <div data-role="navbar">
    <ul>
        <li><a href="#" data-href="sun">Sun</a></li>
        <li><a href="#" data-href="mon">Mon</a></li>
        <li><a href="#" data-href="tue">Tue</a></li>
        <li><a href="#" data-href="wed">Wed</a></li>
        <li><a href="#" data-href="thu">Thu</a></li>
        <li><a href="#" data-href="fri">Fri</a></li>
        <li><a href="#" data-href="sat">Sat</a></li>
    </ul>
    </div><!-- /navbar -->
    <div id="sun" class="content_div">Sunday</div>
    <div id="mon" class="content_div">Monday</div>
    <div id="tue" class="content_div">Tuesday</div>
    <div id="wed" class="content_div">Wednesday</div>
    <div id="thu" class="content_div">Thursday</div>
    <div id="fri" class="content_div">Friday</div>
    <div id="sat" class="content_div">Saturday</div>
</div>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Since there’s so much CSS overwriting going on here, I decided to do about this a different way. Here’s the final code that works for me:

    $(document).delegate('[data-role="navbar"] a', 'click', function() {
        $('a').removeAttr('style');
        $('.content_div').hide();
        $(this).attr('style', 'color: #eee;');
        $('#' + $(this).attr('data-href')).show();
    });

    Thanks @DidierGhys for putting me on the right track!

    • 0