使用CSS在手机上更改HTML布局

我有两列的页面 - 第一列是导航，第二列是文本。它的工作方式类似于桌面版本的选项卡。对于移动设备和平板电脑，我想创建该功能，如果您单击菜单项以在下方显示文本等等。是否有可能创建类似的东西而不创建重复的内容？使用CSS在手机上更改HTML布局

这里是代码：

<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'); 
});

来源

2015-06-15 Marko Kos

请附上您的CSS以及。 – TylerH

http://www.techrepublic.com/blog/web-designer/how-to-create-media-queries-in-responsive-web-design/ – aldux

我真的不明白，你，你能更详细？

从我的理解来看，您试图根据用户点击哪个导航来显示内容文本？也许这样？

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

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

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

工作代码：

<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 ：

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

来源

2015-06-16 10:24:42 Vincent1989

我知道如何创建这个，但这个布局我只需要移动版本。对于平板电脑和桌面我需要这个：http://codepen.io/anon/pen/bdrMzp –

看点这里，是否使用引导程序的网格系统错误，使用col-xs-X，意味着这些列将永远不会堆叠，而如果您使用更大的分辨率cols，它们将叠加，因为这就是boostrap的工作方式，下面是一个示例

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

的md有告诉自举只能堆放那些列在下面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

希望我能帮助

来源

2015-06-16 10:33:10 Diogo

使用CSS在手机上更改HTML布局

回答

相关问题