jquery - 使用 CSS 更改移动设备上的 HTML 布局

Question

我的页面有两列 - 第一列是导航，第二列是文本。它的工作方式类似于桌面版的选项卡。对于手机和平板电脑，我想创建它，如果您单击菜单项以在下方显示文本，依此类推。是否可以在不创建重复内容的情况下创建类似的内容？

代码如下:

<section id="faq" class="main-content">
<div class="row">
    <div class="col-xs-5">
        <nav>
            <ul class="tabs">
                <li class="tab-link current" data-tab="tab-1">Menu item</li>
                <li class="tab-link" data-tab="tab-2">Menu item</li>
                <li class="tab-link" data-tab="tab-3">Menu item</li>
                <li class="tab-link" data-tab="tab-4">Menu item</li>
                <li class="tab-link" data-tab="tab-5">Menu item</li>
                <li class="tab-link" data-tab="tab-6">Menu item</li>
            </ul>
        </nav>
    </div>
    <div class="col-xs-7">
        <div id="tab-1" class="tab-content current">
            some text
        </div>
        <div id="tab-2" class="tab-content">
            some text
        </div>

        <div id="tab-3" class="tab-content">
            some text
        </div>

        <div id="tab-4" class="tab-content">
            some text
        </div>

        <div id="tab-5" class="tab-content">
            some text
        </div>

        <div id="tab-6" class="tab-content">
            some text
        </div>

    </div>
</div>

CSS:

#faq .row {
    max-width: 990px;
    margin: 0 auto;
    text-align: left;
    padding-top: 125px;
    padding-bottom: 125px;
}

#faq ul {
    list-style-type: none;
    padding-left: 0;
}

#faq ul li {
    display: block;
    font-size: 28px;
    font-weight: 200;
    font-style: italic;
    color: #a7a7a7;
    margin: 35px 0;
    cursor: pointer;
}

#faq ul li:first-child {
    margin-top: 0;
}

#faq ul li.current {
    color: #616161;
    padding-bottom: 25px;
    border-bottom: 1px solid #ff204a;
}

#faq a:hover {
    text-decoration: none;
}

#faq .col-xs-7 {
    padding-left: 100px;
}

#faq h2, #faq p {
    margin: 0;
    padding: 0;
}

#faq h2 {
    font-size: 16px;
    color: #5b5b5b;
    font-weight: 400;
    line-height: 1.3;
}

#faq p {
    font-size: 15px;
    font-weight: 300;
    color: #8d8d8d;
    margin-top: 10px;
    margin-bottom: 65px;
    line-height: 1.8;
}

.col-xs-7 .tab-content {
    display: none;
}

.col-xs-7 .tab-content.current {
    display: inherit;
}

jQuery:

$('ul.tabs li').click(function(){
    var tab_id = $(this).attr('data-tab');
    $('ul.tabs li').removeClass('current');
    $('.tab-content').removeClass('current');

    $(this).addClass('current');
    $("#"+tab_id).addClass('current');
});

Answer 1

我不太明白你的意思，你能详细说明一下吗？

根据我的理解，您是在尝试让内容文本根据用户点击的导航显示吗？也许是这样的？

最简单的解决方案是将内容放在列表中，而不是将它们分开:

    <li class="tab-link" data-tab="tab-3"><span>Menu item</span>
        <div class="tab-content"> Aenean efficitur
        pulvinar ligula vel hendrerit. Donec dictum nunc vitae mattis.....</div>
    </li>

然后显示和隐藏当前元素只需使用 css:

/*default*/
.tab-content{display:none;}

/*current*/
.tab-link.current .tab-content{display:block;}

这里的工作代码:

http://codepen.io/vincentccw/pen/YXxYQR