我正在使用 2 个导航标签，
不知何故，我的 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 个文本，第 2 个我该如何解决这个问题？
最佳答案
这是您在 jsfiddle 上的原始代码 - http://jsfiddle.net/VtqcY/1/
您遇到此问题的原因是函数的顺序。首先，您要触发此代码:
$(function () {
$("#week1").hide();
$("#week2").hide();
$("#week3").hide();
$("#week5").hide();
$("#week6").hide();
$("#week7").hide();
$("#aboutme").show();
$("#portfolio").hide();
$("#work").hide();
$("#skills").hide();
});
然后，您稍后在代码中再次激活了#tabs2。 所以，我解决了你的问题。这是给你的 jsfiddle http://jsfiddle.net/VtqcY/ 我所做的只是将上面的代码部分移动到脚本的末尾。
关于javascript - 2 在不同的选项卡中相互重叠的文本 JQuery-UI，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/19671878/