我正在使用JSP，CSS，JQUERY（jquery-1.10.2.js）和AJAX在Eclipse中创建一个Web应用程序。我使用HTML（实际上是JSP）和CSS制作了一个标签效果。 我有2个JSP文件：
第一个JSP（名为：home.jsp）文件只有一个按钮，它将使用AJAX加载第二个JSP文件的内容（Jquery load（）方法）。
第二个JSP（名称为：second.jsp）文件具有实际的标签效果HTML。
问题是我无法显示第一个标签并隐藏其他标签。发生的事情是标签链接到的所有面板（div）都是一个接一个地显示出来的。
我还想告诉我，当我点击其中任何一个（标签）时，问题就解决了。即当我点击其他任何一个标签时，其他人都会隐藏。
但我想要的是，当使用second.jsp加载我的ajax文件时，默认情况下我只能看到第一个标签面板而不是其他标签。
实际上，由于声誉不佳，我无法发布图片。但要清楚了解我的问题，您可以在https://www.youtube.com/watch?v=useXgTzEAZg
在YOUTUBE观看视频以下是文件明智代码：
home.jsp <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<style type="text/css">
#homeDiv {
width: 1000px;
height: 1000px:
}
</style>
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/jkl.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#but').click(function() {
$('#homeDiv').load('folder2/second.jsp #main');
return false;
});
});
</script>
</head>
<body>
<button id="but">press</button>
<br>
<div id="homeDiv"></div>
</body>
</html>
second.jsp <%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta charset="UTF-8">
<title>News Headlines</title>
</head>
<body>
<div>...</div>
<div class="wrapper">
<div class="content">
<div id="main">
<script src="js/jkl.js" type="text/javascript"></script>
<h1>Tabbed Panels</h1>
<div class="tabbedPanels" id="tabbed1">
<ul class="tabs">
<li><a href="#panel1" tabindex="1">Tab 1</a></li>
<li><a href="#panel2" tabindex="2">Tab 2</a></li>
<li><a href="#panel3" tabindex="3">Tab 3</a></li>
</ul>
<div class="panelContainer">
<div id="panel1" class="panel">
<h2>Panel 1 content</h2>
<p>Apples</p>
</div>
<div id="panel2" class="panel">
<h2>Panel 2 content</h2>
<p>Mango</p>
</div>
<div id="panel3" class="panel">
<h2>Panel 3 content</h2>
<p>Potato</p>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
jkl.js (JavaScript file) $(document).ready(function() {
//alert('outside');
//$('.tabs a').bind('click focus',function() {
$(document).on('click', '.tabs a', function()
{
var $this = $(this);
//alert('?????');
// hide panels
$this.parents('.tabbedPanels')
.find('.panel').hide().end()
.find('.active').removeClass('active');
// add active state to new tab
$this.addClass('active').blur();
// retrieve href from link (is id of panel to display)
var panel = $this.attr('href');
// show panel
$(panel).show();
// don't follow link
return false;
}); // end click
$('.tabs').find('li:first a').click();
}); // end ready
styles.css .tabbedPanels {
width: 70%;
float: left;
margin-right: 10px;
}
.tabs {
margin: 20;
padding: 20;
zoom : 1;
}
.tabs li {
float: left;
list-style: none;
padding: 0;
margin: 0;
-webkit-border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
}
.tabs a {
display: block;
text-decoration: none;
padding: 3px 5px;
/* background-color: red;; */
margin-right: 1px;
border: 2px solid rgb(100,20,135);
margin-bottom: -2px;
width: 60px;
-webkit-border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
-moz-border-radius-topleft:8px;
-moz-border-radius-topright:8px;
}
.tabs .active {
border-bottom: 1px solid white;
background-color: white;
color: red;
position: relative;
}
.panelContainer {
clear: both;
margin-bottom: 25px;
border: 1px solid red;
background-color: white;
padding: 10px;
}
.panel h2 {
color: red;
text-shadow: none;
}
.panel p {
color: black;
}
答案 0 :(得分：0)
要实现这一点，我将ID提供给<a id='first_a'>文件中的第一个标签second.jsp。
然后将home.jsp中的脚本替换为：
$(document).ready(function() {
$('#but').click(function() {
$('#homeDiv').load('folder2/second.jsp #main', function() {
$('#first_a').click();
});
return false;
});
});