Incompatibility of Javascript Code

Asked

Viewed 93 times

2

I’m using a script to switch a block with Nav Tabs, the first part of the code works normally, but the part where I request the border-color and play to the other field is only working in Chrome, would someone tell me why?

JS:

            $(function(){
            $('#myTab a').click(function (e) {
                e.preventDefault();
                $(this).tab('show');
                var corbackground = $('#myTab>.active>a').css('border-color');
                $('.tab-content').css('border-color',corbackground);
            });
        });

HTML:

                                <ul class="nav nav-tabs" id="myTab">
                                    <li class="active"><a href="#peito">Peito</a></li>
                                    <li><a href="#biceps">Biceps</a></li>
                                    <li><a href="#costa">Costa</a></li>
                                    <li><a href="#triceps">Triceps</a></li>
                                </ul>
                                <div class="tab-content">
                                    <div class="tab-pane active" id="peito">
                                         <a href="#idphp" class="exercicio" title=""></a>
                                    </div>
                                    <div class="tab-pane" id="biceps">2</div>
                                    <div class="tab-pane" id="costa">3</div>
                                    <div class="tab-pane" id="triceps">4</div>
                                </div>
javascript css
  • 2

    Without seeing the HTML gets a little difficult, but by the logic should not take the border-color of $(this) that was clicked?

  • Exactly, it’s the same element of this, but it still didn’t work, so I tried to create the selector again to see if it solved and also nothing.

1 answer

2


There is a small bug with IE and Firefox, and to get the border color you should ask for border-top-color, as in ex. below:

jquery:

$('#myTab a').click(function (e) {
    e.preventDefault();
    $('.tab-pane').not($(this).attr('href')).hide();
    $($(this).attr('href')).show();
    $('.tab-content').css('border-color', $(this).css('border-top-color'));
});

jsFiddle

Browser other questions tagged javascript css

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