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

时间：2015-10-15 18:16:45

标签： jquery html css css3 tabs

我需要你帮助解决一系列小问题，这些问题可能是一站式修复，谁知道呢。我似乎无法自己解决这个问题，需要一双新的眼睛来浏览我的HTML和CSS编码。我还附上了我遇到的每个问题的截图：

问题＃1： 选中活动标签后，我的标签中似乎有一个破损的底部边框。 enter image description here

问题＃2： 当活动Tab切换到另一个Tab时，顶部或底部边框看起来稍厚。 enter image description here

问题＃3： 在最后一个选项卡上，当选择作为活动选项卡时，底部边框完全丢失？ enter image description here

问题＃4：问题＃4： 当切换任何活动标签时，如何摆脱右侧的1px边框？ enter image description here

选择或不选择的每个边界应仅保留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>

1 个答案:

答案 0 :(得分：0)

我没有遇到你小提琴中破损的边框或边框问题。至于粗边框/不可见边框，您可以进行以下更改：

小提琴：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);
        }

只需将顶部边框放回第一个孩子，将底部边框放回最后一个孩子。我希望这会有所帮助：）

相关问题
最新问题