Tab com idTab

Tab com idTab

by Angelo Rogério Rubin

HTML

<!DOCTYPE html>
<head>
     <title>Twilight</title>
     <link rel="stylesheet" href="style.css" type="text/css" media="screen" />
     </head>
     
     <body>    
     
     <div id="full-tab">
     <ul>
     <li class="tab-id1"><span class="article1"><a href="#t1" class="selected">Article #1     </a></span></li>
     <li class="tab-id2"><span class="article2"><a href="#t2">Article #2      </a></span></li>
     <li class="tab-id3"><span class="article3"><a href="#t3">Article #3      </a></span></li>
     </ul>
     
     <div class="content">
     
     <div id="t1">It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem.</br></br>

     <span style="margin-left: 120px;">The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters</span> </br></br>

     <span style="margin-left: 120px;">Content here, content here', making it look like readable English. Many desktop publishing</span> </br></br>

     <span style="margin-left: 120px;">Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many</span> </br></br>     </div>
     
      <div id="t2">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</br></br> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
     
     <div id="t3">Sed ut perspiciatis unde omnis iste natus error sit voluptatem...

CSS

html, body,div,a {
font-family: helvetica, arial, verdana;
text-decoration: none;
}

ol,ul,li{
list-style: none;
margin:0;
padding:0;
}

#full-tab{
width: 980px;
height: 100%;
border: 1px solid #dbd9da;
}

.tab-id1{
width: 33%;
height: 28px;
float:left;
padding-top: 10px;
border-right: 1px solid #dbd9da;
border-bottom: 1px solid #dbd9da;
border-left: 1px solid #fff;
color: #5c5c5c;
background-image: linear-gradient(bottom, rgb(240,237,240) 39%, rgb(255,255,255) 90%);
background-image: -o-linear-gradient(bottom, rgb(240,237,240) 39%, rgb(255,255,255) 90%);
background-image: -moz-linear-gradient(bottom, rgb(240,237,240) 39%, rgb(255,255,255) 90%);
background-image: -webkit-linear-gradient(bottom, rgb(240,237,240) 39%, rgb(255,255,255) 90%);
background-image: -ms-linear-gradient(bottom, rgb(240,237,240) 39%, rgb(255,255,255) 90%);
background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.39, rgb(240,237,240)),
    color-stop(0.9, rgb(255,255,255))
);
}

.tab-id2{
width: 33.2%;
height: 28px;
float:left;
padding-top: 10px;
border-right: 1px solid #dbd9da;
border-bottom: 1px solid #dbd9da;
border-left: 1px solid #fff;
color: #5c5c5c;
background-image: linear-gradient(bottom, rgb(240,237,240) 39%, rgb(255,255,255) 90%);
background-image: -o-linear-gradient(bottom, rgb(240,237,240) 39%, rgb(255,255,255) 90%);
background-image: -moz-linear-gradient(bottom, rgb(240,237,240) 39%, rgb(255,255,255) 90%);
background-image: -webkit-linear-gradient(bottom, rgb(240,237,240) 39%, rgb(255,255,255) 90%);
background-image: -ms-linear-gradient(bottom, rgb(240,237,240) 39%, rgb(255,255,255) 90%);

background-image: -webkit-gradient(
    linear,
    left bottom,
    left top,
    color-stop(0.39, rgb(240,237,240)),
    color-stop(0.9, rgb(255,255,255))
);
}

.tab-id3{
width: 33.2%;
height: 28px;
float:left;
padding-top: 10px;
border-bottom: 1px solid #dbd9da;
border-left: 1px solid #fff;
color: #5c5c5c;
background-image: linear-gradient(bottom,...

JavaScript

$(document).ready(function(){
    /*
    var igualaTodos = {'border-top': '3px solid #dbd9da'};
    $('.tab-id1,.tab-id2,.tab-id3').css(igualaTodos);
    
    $('.article1').click(function(){
         var laranja = {
            'border-top': '3px solid orange'
         }
         var retira =  {'border-top': '1px solid #dbd9da'}
        $('.tab-id1').css(laranja);
        var iguala = {'border-top': '3px solid #dbd9da'};
        $('.tab-id2, .tab-id3').css(retira);
        $('.tab-id2, .tab-id3').css(iguala);
        
    });
    
        $('.tab-id2').click(function(){
         var laranja = {
            'border-top': '3px solid orange'
        }
        $(this).css(laranja);
    });
    
        $('.tab-id3').click(function(){
         var laranja = {
            'border-top': '3px solid orange'
        }
        $(this).css(laranja);
    });
    */
    
});