Jquery 响应性垂直页面导航的边界问题
我需要你帮我解答一系列小问题，也许是一站式解决方案，谁知道呢。我似乎再也无法独自解决这个问题了，需要一双新的眼睛来浏览我的HTML和CSS编码。我还附上了我遇到的每个问题的截图： 问题1： 选择活动选项卡时，我的选项卡中似乎有一个断开的底部边框。 问题2： 当活动选项卡切换到另一个选项卡时，上边框或下边框似乎稍厚。 问题3： 在最后一个选项卡上，当选择为活动选项卡时，底部边框是否完全丢失？ 问题4： 当任何一个活动选项卡被切换时，如何去掉右边的1px边框？ 选择或不选择的每个边框应仅保留1px 下面是有问题的HTML和CSS代码：Jquery 响应性垂直页面导航的边界问题,jquery,html,css,tabs,Jquery,Html,Css,Tabs,我需要你帮我解答一系列小问题，也许是一站式解决方案，谁知道呢。我似乎再也无法独自解决这个问题了，需要一双新的眼睛来浏览我的HTML和CSS编码。我还附上了我遇到的每个问题的截图： 问题1： 选择活动选项卡时，我的选项卡中似乎有一个断开的底部边框。 问题2： 当活动选项卡切换到另一个选项卡时，上边框或下边框似乎稍厚。 问题3： 在最后一个选项卡上，当选择为活动选项卡时，底部边框是否完全丢失？ 问题4： 当任何一个活动选项卡被切换时，如何去掉右边的1px边框？ 选择或不选择的每个边框应仅保留
<!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>
身体{
背景：#fff；
字体系列：SegoeUI；
字号：9pt；
填充顶部：50px；
}
#vtab{
保证金：自动；
宽度：800px；
身高：100%；
}
#vtab>ul>li{
宽度：110px；
高度：110px；
背景色：rgb（245）；
列表样式类型：无；
显示：块；
文本对齐：居中；
保证金：自动；
垫底：10px；
位置：相对位置；
边框顶部：1px实心rgb（214）；
左边框：1px实心rgb（214）；
边框底部：1px实心rgb（214）；
}
#vtab>ul>li.home{
/*背景：url（'home.png'）无重复中心*/
}
#vtab>ul>li.login{
/*背景：url（'login.png'）无重复中心*/
}
#vtab>ul>li.support{
/*背景：url（'support.png'）无重复中心*/
}
#vtab>ul>li.selected{
右边距：5px；
z指数：10；
位置：相对位置；
背景色：#FFF；
边框底部：1px实心#FFF；
}
#vtab>ul{
浮动：左；
宽度：110px；
文本对齐：左对齐；
显示：块；
保证金：自动0；
填充：0；
位置：相对位置；
顶部：20px；
}
#vtab>div{
背景色：#fafafa；
左边距：110像素；
边框：1px实心#ddd；
最小高度：500px；
填充：12px；
位置：相对位置；
z指数：9；
}
#vtab>div>h4{
颜色：#800；
边框底部：1个点#800；
垫面：5px；
边际上限：0；
}
$（函数（）{
变量$items=$（'#vtab>ul>li'）；
$items.mouseover（函数（）{
$items.removeClass（'selected'）；
$（this.addClass（'selected'）；
var index=$items.index（$（this））；
$（'#vtab>div'）.hide（）.eq（index.show（）；
}).eq（1）.鼠标悬停（）；
});
选项卡1
- 表2
- 表3
- 表4
表1内容
Lorem ipsum dolor sit amet，是一位杰出的献身者。耳鸣前庭
梅特斯，我是莫利斯·埃吉特。我不喜欢喝汽水。艾蒂安
一只扁豆，一只菱叶舌？这是一辆豪华轿车！
两个是直径为菱形的长尾蛇。整数viverra dolor eget eros consequat
设施。拉齐尼亚贵宾馆！
这是一个很好的例子。Donec vitae leo ante。纳拉·森佩尔
猫和鹿。多奈克·康格、莱克图斯·埃吉特·乌兰科珀·萨吉提斯、奥奇·伊尼姆
阿利奎姆·里索斯，埃吉特·阿迪皮斯·内克·塞德·厄洛斯。奥古斯静脉曲张
紫荆。发酵粗酵母。维塔维尼那提斯康莫多洛雷姆酒店
pulvinar neque庄严肃穆。在布朗迪特·朗库斯·里索斯，坐在埃米特·埃利芬德广场上
eleifend sed。
表2内容
Lorem ipsum dolor sit amet，是一位杰出的献身者。耳鸣前庭
梅特斯，我是莫利斯·埃吉特。我不喜欢喝汽水。艾蒂安
一只扁豆，一只菱叶舌？这是一辆豪华轿车！
两个是直径为菱形的长尾蛇。整数viverra dolor eget eros consequat
设施。拉齐尼亚贵宾馆！
这是一个很好的例子。Donec vitae leo ante。纳拉·森佩尔
猫和鹿。多奈克·康格、莱克图斯·埃吉特·乌兰科珀·萨吉提斯、奥奇·伊尼姆
阿利奎姆·里索斯，埃吉特·阿迪皮斯·内克·塞德·厄洛斯。奥古斯静脉曲张
紫荆。发酵粗酵母。维塔维尼那提斯康莫多洛雷姆酒店
pulvinar neque庄严肃穆。在布朗迪特·朗库斯·里索斯，坐在埃米特·埃利芬德广场上
eleifend sed。
表3内容
瓦里乌斯·努拉的梅塞纳斯。莫比·利奥·埃利特，帕特·福西布斯；阿利夸姆埃吉特
马萨。这是一条长在威尼斯和其他地方的短尾蛇。前奎斯
圣人权杖和威尼斯人权杖。Donec ullamcorper，狮子座孕妇
亨德雷特·因特杜姆（hendrerit interdum），特鲁斯·尼西前庭；尊严
ipsum.
毛里斯·弗林利亚、乌纳·维塔·波苏尔·康莫多、奈克·泰勒斯·蒂尼西
#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);
}