0
私のアプリケーションのホームページにナビゲーションタブがいくつかあります。タブの1つにドロップダウンがあります。いずれかのタブをクリックすると、ヘッダーとフッターの間の同じページにコンテンツが読み込まれます。すべてのファイルは内部ファイルです。どうすればそれを達成できますか？AJAX JQueryを使用するのが望ましいですか？また、コンテンツがロードされている特定のタブを選択したいと思います。私のコードスニペット：ナビゲーションタブのコンテンツをホームページに読み込む
$(document).ready(function() {
$(".dropdown").mouseenter(function() {
$("#myDropdown").show();
});
$("#myDropdown, .dropdown").mouseleave(function() {
$("#myDropdown").hide();
});
});/* This is the stylesheet of the main page index.html. */
#header {
display: block;
width: 100%;
height: 10em;
margin: 1px 20px 2px 1px;
border-bottom: 3px red solid;
background: url("images/body-bg.jpg") -20px repeat-y, url("images/gold.gif") 220px 10px no-repeat, url("images/back.png") 320px 10px no-repeat, url("images/AR.png") 480px 10px no-repeat, url("images/black-horizntal.png");
background-size: auto, 100px, 150px, 120px, auto;
}
#title {
text-align: center;
color: white;
font-weight: bold;
font-family: "Arial", Georgia, serif;
font-size: medium;
padding-top: 46px;
}
#tabs {
float: left;
width: 100%;
background: none;
/* border-bottom:4px solid #000; */
overflow: hidden;
position: fixed;
}
#tabs ul {
clear: left;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
left: 50%;
text-align: center;
}
#tabs ul li {
display: block;
float: left;
list-style: none;
margin: 0;
padding: 0;
position: relative;
right: 50%;
border: 0.06em solid darkgray;
font-size: large;
}
#tabs ul li a {
display: block;
margin: 0 0 0 1px;
padding: 3px 10px;
background: #ddd;
color: #000;
text-decoration: none;
line-height: 1.3em;
}
#tabs ul li a:hover {
background: #369;
color: #fff;
}
#tabs ul li a.active,
#tabs ul li a.active:hover {
color: #fff;
background: #000;
font-weight: bold;
}
footer #footer {
position: absolute;
border-top: solid 3px red;
text-align: center;
bottom: 0;
width: 100%;
height: 60px;
}
/* CSS for dropdowns of the "Matrix" tab */
#myDropdown {
display: none;
}
body {
overflow: auto;
height: auto;
width: 100%;
}<meta charset="utf-8" http-equiv="content-type" content="text/html">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<body>
<header>
<div id="header">
<div id="tabs">
<ul class="list-inline" id="nav">
<li><a href="maps/map1.html">Area</a>
</li>
<li><a href="maps/map2.html">Facility</a>
</li>
<li class="dropdown"><a href="#">Matrix<span class="caret"></span></a>
<div class="dropdown-content" id="myDropdown">
<a href="table1.html">Table1</a>
<a href="table2.html">Table2</a>
</div>
</li>
</ul>
</div>
</div>
</header>