Obter border-color de outro elemento

by Jader Wagner

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">1</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>

CSS

ul {
    margin:0;
    padding:0;
    list-style:none;
}
li {
    display:inline-block;
}
a {
    width: 100px;
    height:36px;
    line-height:36px;
    text-align: center;
    display:block;
}
[href="#peito"] {
    border: 2px solid #ff0000;
}
[href="#biceps"] {
    border: 2px solid #00ff00;
}
[href="#costa"] {
    border: 2px solid #0000ff;
}
[href="#triceps"] {
    border: 2px solid #ffff00;
}


.tab-content {
    border: 2px solid #000000;
    display:block;
    width: 450px;
    height:200px;
}

JavaScript

$('.tab-content').css('border-color', $('#myTab .active > a').css('border-top-color'));
$('.tab-pane').not($('#myTab .active > a').attr('href')).hide();

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