使用CSS更改移动设备上的HTML布局
使用CSS更改移动设备上的HTML布局
提问于 2015-06-16 02:35:37
我的页面有两列-第一列是导航，第二列是文本。它的工作方式就像桌面版的标签。对于移动设备和平板电脑，我想要创建它，如果您单击菜单项以在下方显示文本，等等。有没有可能在不创建重复内容的情况下创建类似的内容？
下面是代码：
<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');
});回答 2
Stack Overflow用户
发布于 2015-06-16 18:24:42
我真的不明白你的意思，你能详细解释一下吗？
以我的理解，你试图让内容文本显示在用户点击的导航基础上，对吗？也许是这样的？
最简单的解决方案是将内容放在列表中，而不是将它们分开：
<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
Stack Overflow用户
发布于 2015-06-16 18:33:11
这里的要点是，您使用bootstrap的网格系统是错误的，使用col-xs-X意味着这些列永远不会堆叠，而如果您使用更高分辨率的cols，它们将堆叠，因为这就是bootstrap的工作方式，下面是一个示例
<div class="col-md-5">
1st Col
</div>
<div class="col-md-7">
2st Col
</div>那里的md告诉boostrap只堆叠那些宽度小于998px(我认为)的列，所以在宽度大于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希望我能帮上忙
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/30852552
复制相关文章
相似问题
腾讯云开发者
