javascript - 选项卡内容覆盖选项卡

Question

我正在尝试创建包含不同匹配项的选项卡，但是当我添加匹配项 div 时，它似乎会产生一些冲突。我想知道为什么匹配项没有像其他选项卡中的文本一样放在下方，我该如何修改才能正确放置？

$(document).ready(function() {
    $(".tabs-menu a").click(function(event) {
        event.preventDefault();
        $(this).parent().addClass("current");
        $(this).parent().siblings().removeClass("current");
        var tab = $(this).attr("href");
        $(".tab-content").not(tab).css("display", "none");
        $(tab).fadeIn();
    });
});

.tabs-menu {
    height: 30px;
    float: left;
    clear: both;
}

.tabs-menu li {
    height: 30px;
    line-height: 30px;
    float: left;
    margin-right: 10px;
}

.tabs-menu li.current {
    position: relative;
    z-index: 5;
}

.tabs-menu li a {
    text-transform: uppercase;
    color: #000;
    text-decoration: none; 
}

.tabs-menu .current a {
    color: #b93434;
}

.tabs-menu >li+li:before {
    content: "/\00a0";
    padding: 0 5px;
    color: #ccc;
}

.tabs-menu >li {
    display: inline-block;
}

.tabs-menu  {
    padding: 0px;
}

.breadcrumb .active a {
	color: #b93434;
}

.tab {
    background-color: #fff;
    float: left;
    margin-bottom: 20px;
    width: auto;
}

.tab-content {
    width: 100%;
    display: none;
}

#tab-1 {
    display: block;   
}

.match-item {
    background-color: #fafafa;
    -webkit-box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, .1 );
    box-shadow: 0 1px 1px 0 rgba( 0, 0, 0, .1 );
    padding: 30px 20px;
    margin: 0 0 20px 0;
    -webkit-transition: all 300ms;
    transition: all 300ms;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}

.match-item .match-info {
    width: 100%;
    height: 30px;
}

.match-item .team-info {
    width: 100%;
    height: 24px;
}

.match-item .match-date, .match-item .league-name {
    color: #999;
    font-size: 12px;
    font-weight: bold;
}

.place-left {
    float: left;
}

.place-right {
    float: right;
}

.clear { clear: both; }

.match-item .team-info .column-third{
    width: 33.333333333%;
    float: left;
    height: 24px; 
    display: inline-block;
}

.match-item .team-info .column-third .team-1-wrapper {
    text-align: left;
    height: 24px;
}

.match-item .team-info .column-third .team-2-wrapper {
    text-align: right;
    height: 24px;
}

.match-item .team-info .column-third .time-wrapper {
    text-align: center;
    height: 24px;
}

.match-item .team-info .column-third .team1-img {
    width: 24px;
    height: 24px;
    margin-right: 4px;
    vertical-align: middle; 
}

.match-item .team-info .column-third .team2-img {
    width: 24px;
    height: 24px;
    margin-left: 4px;
    vertical-align: middle; 
}

.match-item .team-info .column-third .the-team {
    vertical-align: middle; 
    font-weight: 700;
    color: #555555;
}

.match-item .team-info .column-third .the-time {
    vertical-align: middle; 
    color: #555555;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tabs-container">
    <ul class="tabs-menu">
        <li class="current">
            <a href="#tab-1">Tab 1</a>
        </li>
        <li>
            <a href="#tab-2">Tab 2</a>
        </li>
        <li>
            <a href="#tab-3">Tab 3</a>
        </li>
        <li>
            <a href="#tab-4">Tab 4</a>
        </li>
    </ul>
    <div class="tab">
        <div id="tab-1" class="tab-content">
            <div class="match-item">
                <div class="match-info">
                    <p class="place-left match-date">03 Feb 2014</p>
                    <p class="place-right league-name">League</p>
                </div>

                <div class="clear"></div>

                <div class="team-info">
                    <div class="column-third">
                        <div class="team-1-wrapper">
                            <img class="team1-img" src="http://demo.themeum.com/sportsline/wp-content/uploads/2013/11/051.png" alt="Real Madrid">
                            <span class="the-team">lol</span>
                        </div>
                    </div>
                    <div class="column-third">
                        <div class="time-wrapper">
                            <span class="the-time">20:45</span>
                        </div>
                    </div>
                    <div class="column-third">
                        <div class="team-2-wrapper">
                            <span class="the-team">lol</span>
                            <img class="team2-img" src="http://demo.themeum.com/sportsline/wp-content/uploads/2013/11/011.png" alt="Real Madrid">
                        </div>
                    </div>
                </div>
            </div>

            <div class="clear"></div>

            <div class="match-item">
                <div class="match-info">
                    <p class="place-left match-date">03 Feb 2014</p>
                    <p class="place-right league-name">League Of Legends</p>
                </div>

                <div class="clear"></div>

                <div class="team-info">
                    <div class="column-third">
                        <div class="team-1-wrapper">
                            <img class="team1-img" src="http://demo.themeum.com/sportsline/wp-content/uploads/2013/11/051.png" alt="Real Madrid">
                            <span class="the-team">lol</span>
                        </div>
                    </div>
                    <div class="column-third">
                        <div class="time-wrapper">
                            <span class="the-time">20:45</span>
                        </div>
                    </div>
                    <div class="column-third">
                        <div class="team-2-wrapper">
                            <span class="the-team">lol</span>
                            <img class="team2-img" src="http://demo.themeum.com/sportsline/wp-content/uploads/2013/11/011.png" alt="Real Madrid">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div id="tab-2" class="tab-content">
            <p>Donec semper dictum sem, quis pretium sem malesuada non. Proin venenatis orci vel nisl porta sollicitudin. Pellentesque sit amet massa et orci malesuada facilisis vel vel lectus. Etiam tristique volutpat auctor. Morbi nec massa eget sem ultricies fermentum id ut ligula. Praesent aliquet adipiscing dictum. Suspendisse dignissim dui tortor. Integer faucibus interdum justo, mattis commodo elit tempor id. Quisque ut orci orci, sit amet mattis nulla. Suspendisse quam diam, feugiat at ullamcorper eget, sagittis sed eros. Proin tortor tellus, pulvinar at imperdiet in, egestas sed nisl. Aenean tempor neque ut felis dignissim ac congue felis viverra. </p>
        </div>

        <div id="tab-3" class="tab-content">
            <p>Duis egestas fermentum ipsum et commodo. Proin bibendum consectetur elit, hendrerit porta mi dictum eu. Vestibulum adipiscing euismod laoreet. Vivamus lobortis tortor a odio consectetur pulvinar. Proin blandit ornare eros dictum fermentum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur laoreet, ante aliquet molestie laoreet, lectus odio fringilla purus, id porttitor erat velit vitae mi. Nullam posuere nunc ut justo sollicitudin interdum. Donec suscipit eros nec leo condimentum fermentum. Nunc quis libero massa. Integer tempus laoreet lectus id interdum. Integer facilisis egestas dui at convallis. Praesent elementum nisl et erat iaculis a blandit ligula mollis. Vestibulum vitae risus dui, nec sagittis arcu. Nullam tortor enim, placerat quis eleifend in, viverra ac lacus. Ut aliquam sapien ut metus hendrerit auctor dapibus justo porta. </p>
        </div>

        <div id="tab-4" class="tab-content">
            <p>Proin sollicitudin tincidunt quam, in egestas dui tincidunt non. Maecenas tempus condimentum mi, sed convallis tortor iaculis eu. Cras dui dui, tempor quis tempor vitae, ullamcorper in justo. Integer et lorem diam. Quisque consequat lectus eget urna molestie pharetra. Cras risus lectus, lobortis sit amet imperdiet sit amet, eleifend a erat. Suspendisse vel luctus lectus. Sed ac arcu nisi, sit amet ornare tellus. Pellentesque nec augue a nibh pharetra scelerisque quis sit amet felis. Nullam at enim at lacus pretium iaculis sit amet vel nunc. Praesent sapien felis, tincidunt vitae blandit ut, mattis at diam. Suspendisse ac sapien eget eros venenatis tempor quis id odio. Donec lacus leo, tincidunt eget molestie at, pharetra cursus odio. </p>
        </div>
    </div>
</div>

Answer 1

不要 float:left 你的 .tabs-menu。或者清除你的.tab div。