我正在使用 2 个导航选项卡，
不知何故，我的两个标签以一种不寻常的方式组合在一起，如下所示：
所以有两个文本不应该重叠。如何解决这个问题？
我的html文档：
<!DOCTYPE html>
<html>
<head>
<title>Portfolio - Arjan Speiard</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="css/style.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/jquery-ui.js" type="text/javascript"></script>
<script src="js/data.js" type="text/javascript"></script>
</head>
<body>
<div id="background">
<div id="container">
<div id="clipboard"></div>
<h1 id="logo"><a href="#aboutme">Portfolio</a></h1><hr />
<nav id="tabs">
<ul id="menu">
<li id="menu_about"><a href="#aboutme">All About Me</a></li>
<li id="menu_portfolio"><a href="#portfolio">Portfolio</a></li>
<li id="menu_work_experience"><a href="#work">Werkervaring</a></li>
<li id="menu_skills"><a href="#skills">Skills</a></li>
</ul>
<div id="frame">
<div id="portfolio">
<article>
<h1>Portfolio</h1>
Voor Client moesten wij een portfolio maken. Hierin moesten een aantal dingen staan zoals wie je bent en wat je doet en natuurlijk
niet te vergeten de opdrachten die we allemaal met client hebben gemaakt.<br/>
Alle opdrachten kunt u vinden per week hier aan de zijkant.<br/>
Per opdracht moesten we ook een testtabel invullen op de pagina van de bepaalde week staat naar iedere opdracht en tabel een linkje.
</article>
</div>
<div id="aboutme">
<article>
Hallo Ik ben Arjan Speiard, en studeer Informatica op Hogeschool Windesheim.<br/>
Verder ben ik 20 jaar oud en leef ik nog bij mijn ouders.<br/>
Ik ben woonachtend in Duitsland, wat mij veel kilometers geeft qua reizen iedere dag.<br/>
Maar dit is het zeker waard. De opleiding is superleuk en ik heb ook een leuke klas.<br/><br/>
Naast school game ik veel denk hierbij aan MMORPG spellen. En ben ik nu bezig het leren van 3D modelleren.<br/>
Andere hobbies zijn Skateboarden, naar festivals gaan en lekker gek doen.
</article>
</div>
<div id="work">
<article>
Naast school heb ik ook nog een baantje als websiteonderhouder bij OBO Banden.<br/>
Daar maak ik een App om zo banden te kunnen annalyseren of die nog te repareren valt of niet.
</article>
</div>
<div id="skills">
<article>
Ik heb ervaring in C#, Java, HTML5, CSS3, Javascript, JQuery, PHP, MySQL, SQL-Server en XML.
</article>
</div>
</div>
</nav><hr />
<nav id="tabs2">
<ul id="portfolio_menu">
<li id="menu_week_1"><a href="#week1">Week 1</a></li>
<li id="menu_week_2"><a href="#week2">Week 2</a></li>
<li id="menu_week_3"><a href="#week3">Week 3</a></li>
<li id="menu_week_5"><a href="#week5">Week 5</a></li>
<li id="menu_week_6"><a href="#week6">Week 6</a></li>
<li id="menu_week_7"><a href="#week7">Week 7</a></li>
</ul>
<div id="frame">
<div id="week1">
<article>
<h1>Week 1</h1>
We moesten als eerste opdracht een Tabel maken die we vervolgens gebruiken om alle testresultaten in op te slaan.
<a href="Week_1/tabel.html">Deze is te bezichten op deze link en al ingevuld voor opdracht 1: nieuwsbrief.</a><br/>
Verder moesten we een nieuwsbrief namaken. <a href="Week_1/index.html">Deze is te bezichtigen op deze link.</a>
</article>
</div>
<div id="week2">
<article>
<h1>Week 2</h1>
<h2>Opdracht 1</h2>
Voor deze week werd ons geleerd wat javascript is en hoe je dat moet gebruiken.<br/>
Dus we kregen opdrachten met daarin javascript. Als eerste opdracht moesten we een visitekaartje maken.<br/>
<a href="Week_2/Visitekaartje/index.html">Deze is te bezichtigen op deze link.</a> <br/>
De testresultaten hiervan kunt u op <a href="Week_2/Visitekaartje/Tabel.html">deze link zien.</a>
<h2>Opdracht 2</h2>
Als 2e opdracht mochten we een Workout-programma maken. Hierin moesten workouts gemaakt en getoond kunnen worden.<br/>
<a href="Week_2/Workout/index.html">Deze is te bezichtigen op deze link.</a><br/>
De testresultaten hiervan kunt u op <a href="Week_2/Workout/Tabel.html">deze link zien.</a>
</article>
</div>
<div id="week3">
<article>
<h1>Week 3</h1>
<h2>Opdracht 1</h2>
Deze week mochten we aan de slag met JQuery. Een framework wat JavaScript een stuk simpeler maakt.<br/>
We moesten als opdracht een Festivalplanner maken hierin moesten een aantal podia zijn op verschillende dagen met verschillende acts.<br/>
Hiervoor hadden we 2 weken de tijd vanwege de vakantie.<br/>
<a href="Week_3/index.html">Deze opdracht is te bezichtigen op deze link.</a><br/>
De testresultaten hiervan kunt u op <a href="Week_3/Tabel.html">deze link zien.</a>
</article>
</div>
<div id="week5">
<article>
<h1>Week 5</h1>
<h2>Opdracht 1</h2>
Deze week mochten we aan de slag met Ajax-calls naar een servertje toe door middel van JQuery.<br/>
We moesten een hardloopwedstrijd simuleren genaamd de Ekiden.<br/>
<a href="Week_5/index.html">Deze opdracht is te bezichtigen op deze link.</a><Br/>
De testresultaten hiervan kunt u op <a href="Week_5/tabel.html">deze link zien.</a>
<h3>Opgelet:</h3>
Zonder een php-server werkt deze opdracht niet. Zet het hele portfolio dus in Htdocs van Xampp of een eensgelijksprogramma en probeer het opnieuw.
</article>
</div>
<div id="week6">
<article>
<h1>Week 6</h1>
<h2>Opdracht 1</h2>
Deze week moesten we een spelletje maken op het canvas van HTML5. Door middel van JavaScript en/of JQuery.<br/>
Ik heb een breakout variant gemaakt omdat mij dit deed denken aan het spel DX-Ball welke ik superleuk vond toen ik klein was.<br/>
Deze opdracht heb ik gemaakt samen met <a href="http://www.darkpendula.nl">Sandra Mastenbroek</a>.<br/>
<a href="Week_6/index.html">Deze opdracht is te bezichtigen op deze link.</a><br/>
De testresultaten hiervan kunt u op <a href="Week_6/tabel.html">deze link zien.</a>
</article>
</div>
<div id="week7">
<article>
<h1>Week 7</h1>
<h2>Opdracht 1</h2>
Deze week moesten we aan de slag met een MVC-framework. We mochten zelf kiezen welk framework dat was.<br/>
Als opdracht moesten we een reservering/ordersysteem maken. Dit hebben we gedaan door middel van het framework <a href="http://angularjs.org/">AngularJS</a>.<br/>
Deze opdracht is gemaakt samen met Hans-Jurgen Bakkenes.<br/>
<a href="Week_7/index.html">Deze opdracht is te bezichtigen op deze link.</a><br/>
De testresultaten hiervan kunt u op <a href="Week_7/tabel.html">deze link zien.</a>
</article>
</div>
</div>
</nav><hr />
</div>
</div>
</body>
</html>
这是我的 Data.js：
/*jslint browser: true*/
/*global $, console*/
$(document).ready(function () {
"use strict";
$(function () {
$("#week1").hide();
$("#week2").hide();
$("#week3").hide();
$("#week5").hide();
$("#week6").hide();
$("#week7").hide();
$("#aboutme").show();
$("#portfolio").hide();
$("#work").hide();
$("#skills").hide();
});
$(function () {
$("#tabs").tabs({
activate: function () {
var active, tab;
active = $("#tabs").tabs("option", "active");
tab = $("#tabs ul>li a").eq(active).attr('href');
switch (tab) {
case "#aboutme":
$("#week1").hide();
$("#week2").hide();
$("#week3").hide();
$("#week5").hide();
$("#week6").hide();
$("#week7").hide();
$("#aboutme").show();
$("#portfolio").hide();
$("#work").hide();
$("#skills").hide();
break;
case "#portfolio":
$("#week1").hide();
$("#week2").hide();
$("#week3").hide();
$("#week5").hide();
$("#week6").hide();
$("#week7").hide();
$("#aboutme").hide();
$("#portfolio").show();
$("#work").hide();
$("#skills").hide();
break;
case "#work":
$("#week1").hide();
$("#week2").hide();
$("#week3").hide();
$("#week5").hide();
$("#week6").hide();
$("#week7").hide();
$("#aboutme").hide();
$("#portfolio").hide();
$("#work").show();
$("#skills").hide();
break;
case "#skills":
$("#week1").hide();
$("#week2").hide();
$("#week3").hide();
$("#week5").hide();
$("#week6").hide();
$("#week7").hide();
$("#aboutme").hide();
$("#portfolio").hide();
$("#work").hide();
$("#skills").show();
break;
}
}
});
});
$(function () {
$("#tabs2").tabs({
activate: function () {
var active, tab;
active = $("#tabs2").tabs("option", "active");
tab = $("#tabs2 ul>li a").eq(active).attr('href');
switch (tab) {
case "#week1":
$("#week1").show();
$("#week2").hide();
$("#week3").hide();
$("#week5").hide();
$("#week6").hide();
$("#week7").hide();
$("#aboutme").hide();
$("#portfolio").hide();
$("#work").hide();
$("#skills").hide();
break;
case "#week2":
$("#week1").hide();
$("#week2").show();
$("#week3").hide();
$("#week5").hide();
$("#week6").hide();
$("#week7").hide();
$("#aboutme").hide();
$("#portfolio").hide();
$("#work").hide();
$("#skills").hide();
break;
case "#week3":
$("#week1").hide();
$("#week2").hide();
$("#week3").show();
$("#week5").hide();
$("#week6").hide();
$("#week7").hide();
$("#aboutme").hide();
$("#portfolio").hide();
$("#work").hide();
$("#skills").hide();
break;
case "#week5":
$("#week1").hide();
$("#week2").hide();
$("#week3").hide();
$("#week5").show();
$("#week6").hide();
$("#week7").hide();
$("#aboutme").hide();
$("#portfolio").hide();
$("#work").hide();
$("#skills").hide();
break;
case "#week6":
$("#week1").hide();
$("#week2").hide();
$("#week3").hide();
$("#week5").hide();
$("#week6").show();
$("#week7").hide();
$("#aboutme").hide();
$("#portfolio").hide();
$("#work").hide();
$("#skills").hide();
break;
case "#week7":
$("#week1").hide();
$("#week2").hide();
$("#week3").hide();
$("#week5").hide();
$("#week6").hide();
$("#week7").show();
$("#aboutme").hide();
$("#portfolio").hide();
$("#work").hide();
$("#skills").hide();
break;
}
}
});
});
});
这是我的 style.css：
@import url("menu.css");
html{
width:100%;
height:100%;
}
body{
width:100%;
height:100%;
min-width:960px;
text-align: center;
background: url(../images/Desk_Texture.jpg) no-repeat;
}
a, a:visited{
text-decoration: none;
color:#0A5D7E;
}
#container{
margin:auto;
padding:0px;
width:960px;
height:100% !important;
min-height: 900px;
height:751px;
position: relative;
text-align: left;
}
#clipboard{
position: absolute;
top:0px;
left:70px;
width:900px;
height:985px;
background: url(../images/clipboard.gif) no-repeat;
}
#logo{
position: absolute;
top:90px;
left:140px;
width:242px;
height:126px;
background: url(../images/logo.gif) no-repeat;
text-indent: -9999px;
}
#logo a{
display:block;
width:266px;
height: 58px;
position:absolute;
left: 0px;
top: 0px;
}
#frame{
display:block;
width:520px;
height:505px;
position: absolute;
left:280px;
top:250px;
background: url(../images/contentBox.gif) no-repeat;
z-index: 5;
}
#frame article{
margin-left: 15px;
margin-right: 15px;
margin-top:15px;
}
#portfolio_menu{
position: absolute;
top:235px;
left:90px;
width:138px;
height:245px;
}
hr{
display:none;
}
.clear{
clear:both;
height:0px;
}
再说一遍，我怎么会看到 2 条短信通过彼此，第二条我该如何解决这个问题？