Question

我有以下情况，必须在纯CSS中完成100％，不包括JS。

JSFiddle：http://jsfiddle.net/hen75c3g/3/

现在，当我加载页面时，会显示默认内容。此外，当我单击第一个选项卡时，将显示正确的内容。当我点击其他标签时，我感兴趣的是默认内容消失并显示相关内容。

这必须仅在CSS中完成，因此不必涉及Javascript。可以这样做吗？

    .accordion {
        width:830px;
        overflow:hidden;
        margin:10px auto;
        color:#474747;
        padding:10px;
        border:1px solid black;
    }
    .accordion section h2 {
        display:none;
    }
    .accordion section h2 a {
        float:left;
        overflow:hidden;
        cursor:pointer;
        margin:10px;
        padding:10px;
        font-size:12px;
        color: #000;
        text-decoration:none;
        width:100%;
    }
    .accordion section p {
        display:none;
    }
    .accordion section:after {
        font-size:24px;
        color:#fff;
        font-weight:bold;
    }
    .accordion section h2 {
        position:relative;
    }
    .accordion section p.default {
        clear:both;
        display:block;
    }
    .accordion section:target p {
        clear:both;
        display:block;
    }

    <div class="_m-container">
        <div class="accordion">
            <ul class="_m-menu">
                <li><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>
            </ul>
            <section id='tab-1'>
                 <h2><a href='#tab-1'>Option 1</a></h2>
    
                <p class='default'>Tab1 content.</p>
            </section>
            <section id='tab-2'>
                 <h2><a href='#tab-2'>Option 2</a></h2>
    
                <p>Tab 2 content.</p>
            </section>
            <section id='tab-3'>
                 <h2><a href='#tab-3'>Option 3</a></h2>
    
                <p>Tab3 content .</p>
            </section>
        </div>
    </div>

Answer 1

我不相信这可以在css中完成。我认为最接近纯css选项卡实现的解决方案是悬停。

但是，为了实现您正在寻找的jQuery，您可以执行以下操作：（请注意，我已经为元素添加了一些类，请参阅http://jsfiddle.net/hen75c3g/18/）

$('.accordion').on('click', '.tab-link', function(){
// store the href as a variable
var tabSelector = $(this).attr('href');    

// hide the previously visible div
$('.tab-content').removeClass('active');

// add active class
$(tabSelector).addClass('active');

return false;

});

CSS - 单击选项卡时消失的默认内容

1 个答案: