響應垂直頁面導航的邊框問題

我需要您的幫助，解決一系列較小的問題，這些問題可能是一站式解決方案，誰知道。我似乎無法再獨立地理解這一點，並且需要全新的眼光來瀏覽我的HTML和CSS編碼。我還附上了我遇到的每個問題的屏幕截圖：響應垂直頁面導航的邊框問題

問題1：當選擇活動的選項卡時，我的選項卡中似乎存在底部邊框斷開。

問題＃2：的頂部或底部邊界時出現的活動選項卡被切換到另一個選項卡稍厚。

問題3：在最後一個選項卡上，當選擇作爲活動選項卡時，下邊框完全缺失？

問題4：如何切換右側的1px邊界，當任何活動選項卡切換？

無論選擇或不選擇每個邊框應保持1px只。

這裏是有問題的HTML和CSS代碼：

<!DOCTYPE html> 

<html> 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> 
    <style type="text/css"> 
     body { 
      background: #fff; 
      font-family: Segoe UI; 
      font-size: 9pt; 
      padding-top: 50px; 
     } 
     #vtab { 
      margin: auto; 
      width: 800px; 
      height: 100%; 
     } 
     #vtab > ul > li { 
      width: 110px; 
      height: 110px; 

      background-color: rgb(245,245,245); 
      list-style-type: none; 
      display: block; 
      text-align: center; 
      margin: auto; 
      padding-bottom: 10px; 
      position: relative; 

      border-top: 1px solid rgb(214,214,214); 
      border-left: 1px solid rgb(214,214,214); 
      border-bottom: 1px solid rgb(214,214,214); 

     } 
     #vtab > ul > li.home { 
      /* background: url('home.png') no-repeat center center; */ 
     } 
     #vtab > ul > li.login { 
      /* background: url('login.png') no-repeat center center; */ 
     } 
     #vtab > ul > li.support { 
      /* background: url('support.png') no-repeat center center; */ 
     } 
     #vtab > ul > li.selected { 
      margin-right: 5px; 
      z-index: 10; 
      position: relative; 
      background-color: #FFF; 
      border-bottom: 1px solid #FFF; 
     } 
     #vtab > ul { 
      float: left; 
      width: 110px; 
      text-align: left; 
      display: block; 
      margin: auto 0; 
      padding: 0; 
      position: relative; 
      top: 20px; 
     } 
     #vtab > div { 
      background-color: #fafafa; 
      margin-left: 110px; 
      border: 1px solid #ddd; 
      min-height: 500px; 
      padding: 12px; 
      position: relative; 
      z-index: 9; 
     } 
     #vtab > div > h4 { 
      color: #800; 
      border-bottom: 1px dotted #800; 
      padding-top: 5px; 
      margin-top: 0; 
     } 
    </style> 

    <script type="text/javascript"> 
     $(function() { 
      var $items = $('#vtab>ul>li'); 
      $items.mouseover(function() { 
       $items.removeClass('selected'); 
       $(this).addClass('selected'); 

       var index = $items.index($(this)); 
       $('#vtab>div').hide().eq(index).show(); 
      }).eq(1).mouseover(); 
     }); 
    </script> 

</head> 
<body> 
    <div id="vtab"> 
     <ul> 
      <li class="selected">Tab1</li> 
      <li>Tab2</li> 
      <li>Tab3</li> 
      <li>Tab4</li> 
     </ul> 

     <div> 
      <h4>Tab1 Content</h4> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dictum tincidunt 
      metus, vitae porta elit mollis eget. Sed id nisl nec lorem tincidunt sodales. Etiam 
      a dolor tellus, vel rhoncus ligula? Duis adipiscing vehicula urna ut pellentesque! 
      Duis eleifend lacinia diam a rhoncus. Integer viverra dolor eget eros consequat 
      facilisis. Curabitur dignissim dignissim lacinia! 
      <br /> 
      <br /> 
      Sed bibendum velit et magna placerat bibendum. Donec vitae leo ante. Nulla semper 
      dapibus felis et luctus. Donec congue, lectus eget ullamcorper sagittis, orci enim 
      aliquam risus, eget adipiscing quam neque sed eros. Donec commodo nisi varius augue 
      lacinia pharetra. Cras lacinia fermentum luctus. Nunc venenatis commodo lorem, vitae 
      pulvinar neque dignissim sed. Proin blandit rhoncus risus, sit amet eleifend quam 
      eleifend sed. 
     </div> 

     <div> 
      <h4>Tab2 Content</h4> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dictum tincidunt 
      metus, vitae porta elit mollis eget. Sed id nisl nec lorem tincidunt sodales. Etiam 
      a dolor tellus, vel rhoncus ligula? Duis adipiscing vehicula urna ut pellentesque! 
      Duis eleifend lacinia diam a rhoncus. Integer viverra dolor eget eros consequat 
      facilisis. Curabitur dignissim dignissim lacinia! 
      <br/><br/> 
      Sed bibendum velit et magna placerat bibendum. Donec vitae leo ante. Nulla semper 
      dapibus felis et luctus. Donec congue, lectus eget ullamcorper sagittis, orci enim 
      aliquam risus, eget adipiscing quam neque sed eros. Donec commodo nisi varius augue 
      lacinia pharetra. Cras lacinia fermentum luctus. Nunc venenatis commodo lorem, vitae 
      pulvinar neque dignissim sed. Proin blandit rhoncus risus, sit amet eleifend quam 
      eleifend sed.  
     </div> 

     <div> 
      <h4>Tab3 Content</h4> 
      Maecenas in varius nulla. Morbi leo elit, volutpat ac faucibus in; aliquam eget 
      massa. Nullam a neque ac turpis luctus venenatis et placerat risus. Quisque pretium 
      scelerisque sapien, et accumsan nunc venenatis non. Donec ullamcorper, leo gravida 
      hendrerit interdum, tellus nisi vestibulum justo; quis dignissim enim risus quis 
      ipsum.<br /> 
      <br /> 
      Mauris fringilla, urna vitae posuere commodo, neque tellus tincidunt nisi, aliquam 
      scelerisque purus nulla ac enim. Cras urna urna, vestibulum ut aliquam sed, laoreet 
      et justo! Vestibulum eleifend porta mollis. Donec molestie, turpis sed commodo consequat, 
      erat purus sollicitudin arcu, non vestibulum risus lacus ac ipsum. Curabitur vitae 
      pellentesque purus. 
     </div> 

     <div> 
      <h4>Tab4 Content</h4> 
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum dictum tincidunt 
      metus, vitae porta elit mollis eget. Sed id nisl nec lorem tincidunt sodales. Etiam 
      a dolor tellus, vel rhoncus ligula? Duis adipiscing vehicula urna ut pellentesque! 
      Duis eleifend lacinia diam a rhoncus. Integer viverra dolor eget eros consequat 
      facilisis. Curabitur dignissim dignissim lacinia! 
      <br /> 
      <br /> 
      Sed bibendum velit et magna placerat bibendum. Donec vitae leo ante. Nulla semper 
      dapibus felis et luctus. Donec congue, lectus eget ullamcorper sagittis, orci enim 
      aliquam risus, eget adipiscing quam neque sed eros. Donec commodo nisi varius augue 
      lacinia pharetra. Cras lacinia fermentum luctus. Nunc venenatis commodo lorem, vitae 
      pulvinar neque dignissim sed. Proin blandit rhoncus risus, sit amet eleifend quam 
      eleifend sed. 
     </div> 

    </div> 
</body> 
</html>

來源

2015-10-15 BobbyJones

請問您可以添加一個小提琴 – Jesse

小提琴是：https：//jsfiddle.net/qy9oLzu8/ – BobbyJones

我沒有碰上你的提琴破邊框或側邊框的問題。至於粗邊框/無形的界限，在這裏你可以進行更改：

小提琴：https://jsfiddle.net/qy9oLzu8/1/

#vtab > ul > li.selected { 
      margin-right: 5px; 
      z-index: 10; 
      position: relative; 
      background-color: #FFF; 
      border-bottom: 0px solid #FFF;    
      border-top: 0px solid #FFF; 
     } 
     #vtab > ul > li:first-child.selected { 
      border-top: 1px solid rgb(214,214,214); 
     } 
     #vtab > ul > li:last-child.selected { 
      border-bottom: 1px solid rgb(214,214,214); 
     }

只需攜帶上邊框後面的第一個孩子，而下面的最後一個孩子。我希望這可以幫助:)

來源

2015-10-15 18:44:53 Jesse

響應垂直頁面導航的邊框問題

回答

相關問題