响应垂直页面导航的边框问题

我需要您的帮助，解决一系列较小的问题，这些问题可能是一站式解决方案，谁知道。我似乎无法再独立地理解这一点，并且需要全新的眼光来浏览我的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

响应垂直页面导航的边框问题

回答

相关问题