Question

如果点击第一个'a'标签，那么我通过jquery second'a'标签将'selected'类添加到此处，然后第一个标签重叠在第二个标签上。我不想改变它的立场。只想将z-index添加到选定的标签页。

我的代码出了什么问题：

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();
    });
});

感谢你。

Answer 1

通过“我不想改变其立场”我认为你的意思是left和top位置。
在你的CSS中;将所选的position值更改为relative而不是absolute。

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

这是 demo fiddle 。

如何防止标签重叠？

1 个答案: