Question

if clicked on first ‘a’ tag then I add ‘selected’ class to this by jquery second ‘a’ tag then first tab overlapped on second one. I do not want to change its position. Just want to add z-index to selected tab.

Whats wrong in my code:

html:

<div class="kumar-tabs">
            <ul>
                <li><a href="javascript:void(0)" id="residential">Residential</a></li>
                <li><a href="javascript:void(0)" id="commercial" >Commercial</a></li>
                <div class="kumar-links-bottom-line"></div>
            </ul>
            <div class="residential" style="">
                <div class="kumar-projet-row">
                    <span class="kumar-bullet"></span>
                    <a href="project-overview.php?PID=9" class="kumar-project-name">Kumar Surabhi</a>
                    <span class="kumar-project-desc">- Swargate</span>
                </div>

            </div>
            <div class="commercial" style="display: none;">
                <div class="kumar-projet-row">
                    <span class="kumar-bullet"></span>
                    <a href="project-overview.php?PID=21" class="kumar-project-name">Connaught Place</a>
                    <span class="kumar-project-desc">- Bund Garden Road</span>
                </div>      
            </div>
</div>

css:

.kumar-tabs {
overflow: hidden;
}
.kumar-tabs ul {
position: relative;
overflow: hidden;
margin: 7px 0;
}
.kumar-tabs li {
float: left;
}
.kumar-tabs li a {
display: block;
margin: 0 5px;
background: #cacaca;
border: 1px solid #a2a2a2;
border-bottom: none;
padding: 5px;
color: #606060;
}
.kumar-tabs li a.selected {
background: #ffffff;
position: absolute;
z-index: 1;
color: #2f2f2f;
}
.kumar-links-bottom-line {
background: #a2a2a2;
height: 1px;
width: 100%;
position: absolute;
bottom: 0px;
}

Jquery:

$(document).ready(function(){
    $('#commercial').removeClass('selected');
    $('#residential').addClass('selected'); 
    $('.commercial').hide();
    $('.residential').show();

    $('#residential').click(function(){
        $('#commercial').removeClass('selected');
        $('#residential').addClass('selected'); 
        $('.commercial').hide();
        $('.residential').show();   
    });
    $('#commercial').click(function(){
        $('#residential').removeClass('selected');  
        $('#commercial').addClass('selected');
        $('.residential').hide();
        $('.commercial').show();
    });
});

Thanking You.

Answer 1

By “I do not want to change its position” I think you mean the left and top position.
In your CSS; change the position value of the selected to relative instead of absolute.

.kumar-tabs li a.selected {
    background: #ffffff;
    position: relative; /* « or remove this line */
    z-index: 1;
    color: #2f2f2f;
}

Here is a demo fiddle.