ieQsan ieQsan - 5 months ago 17
jQuery Question

Remive DIV border in CSS

I am creating html tab and I very difficult to remove border between tab header and container. Please give me some advice.

Thanks![enter image description here]1

==============================This is CSS====================================

.container{
width: 100%;
margin: 0 auto;
}

ul.tabs{
margin: 0px;
padding: 0px;
list-style: none;
}
ul.tabs li{
background: none;
color: #222;
display: inline-block;
padding: 10px 15px;
cursor: pointer;
}

.tab-content{
display: none;
background: #f2f2f2;
border-left: thin solid black;
border-top: thin solid black;
border-right: thin solid black;
border-bottom: thin solid black;
padding: 15px;
}

ul.tabs li.current{
background: #f2f2f2;
border-left: thin solid black;
border-top: thin solid black;
border-right: thin solid black;
color: #222;
}

.tab-content.current{
display: inherit;
}


========================This is HTML===============================

<div class="container">
<ul class="tabs">
<li class="tab-link current" data-tab="tab-1">Tab1</li>
<li class="tab-link" data-tab="tab-2">Tab2</li>
<li class="tab-link" data-tab="tab-3">Tab3</li>
</ul>
<div id="tab-1" class="tab-content current">
Tab 1
</div>
<div id="tab-2" class="tab-content">
Tab 2
</div>
<div id="tab-3" class="tab-content">
Tab 3
</div>
</div>


And also use JQuery library 1.7.

Answer

Just add bottom: -1px to current tab (& set position relative)

.container{
            width: 100%;
            margin: 0 auto;
        }

        ul.tabs{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        ul.tabs li{
            background: none;
            color: #222;
            display: inline-block;
            padding: 10px 15px;
            cursor: pointer;
        }

        .tab-content{
            display: none;
            background: #f2f2f2;
            border-left: thin solid black;
            border-top: thin solid black;
            border-right: thin solid black;
            border-bottom: thin solid black;
            padding: 15px;
        }

        ul.tabs li.current{         
            background: #f2f2f2;
            border-left: thin solid black;
            border-top: thin solid black;
            border-right: thin solid black;
            color: #222;
            position: relative; 
            bottom: -1px;
        }

        .tab-content.current{
            display: inherit;
        }  
<div class="container">
        <ul class="tabs">
                <li class="tab-link current" data-tab="tab-1">Tab1</li>
                <li class="tab-link" data-tab="tab-2">Tab2</li>
                <li class="tab-link" data-tab="tab-3">Tab3</li>
        </ul>
    <div id="tab-1" class="tab-content current">
                            Tab 1
    </div>
    <div id="tab-2" class="tab-content">
                                Tab 2
    </div>
    <div id="tab-3" class="tab-content">
        Tab 3
    </div>
 </div>

Comments