0
내 응용 프로그램의 홈 페이지에 탐색 탭이 몇 개 있습니다. 탭 중 하나에 드롭 다운이 있습니다. 탭을 클릭하면 내용이 머리글과 바닥 글 사이의 동일한 페이지에로드되기를 원합니다. 모든 파일은 내부 파일입니다. 어떻게 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>