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

Answer 2

看到这里的重点，你是否正在使用bootstrap的网格系统错误，使用col-xs-X意味着那些列永远不会堆叠，而如果你使用更大的分辨率cols它们将堆叠，因为这就是boostrap的工作方式，这里是一个例子

<div class="col-md-5">
    1st Col
</div>
<div class="col-md-7">
    2st Col
</div>

md告诉boostrap只堆叠998px（我认为）宽度以下的列，所以在宽度大于设备宽度的设备中：

1st Col       2nd Col

在宽度以下的设备中，它将显示如下：

1st Col
2nd Col

你的目标是什么？所以这一切的总结：

-xs cols will never stack no matter the width
-sm cols will stack below 768px of width
-md cols will stack below 998px of width
-lg cols will stack below 1200px of width

希望我能帮忙

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

2 个答案: