1

如果单击第一个“a”标签，那么我通过 jquery 第二个“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;
}

查询：

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

感谢您。

4

1 回答 1

1

“我不想改变它的立场”我认为你的意思是left和top立场。
在你的 CSS 中；position将 selected 的值更改为而relative不是absolute.

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

这是一个演示小提琴。

于 2013-01-31T18:18:07.747 回答