1

最初の「a」タグをクリックすると、jqueryの2番目の「a」タグによって「選択された」クラスがこれに追加され、最初のタブが2番目のタブにオーバーラップします。位置を変えたくない。選択したタブに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();
    });
});

ありがとうございます。

4

1 に答える 1

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

これがデモフィドルです。

于 2013-01-31T18:18:07.747 に答える