我使用jquery和css来创建选项卡，但它们在IE 6和7中无法正常工作。 选项卡不可单击，每个选项卡的内容仅显示在彼此下方。 这是所有代码。 第 2 部分是 css。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Spencer's Portfolio-Home</title>
<link href="master.css" rel="stylesheet" type="text/css" />
<link href="css/lightbox.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/lightbox.js"></script>
<script type="text/javascript" src="js/jquery.address-1.4.min.js"></script>
<script type="text/javascript">
var QTABS = {
init: function () {
// attached onload and change event to address plugin
$.address.init(function(event) {
// first load, set panel
QTABS.setPanel(event);
}).change(function(event) {
// if the url changes, set panel
QTABS.setPanel(event);
});
},
// the core function to display correct panel
setPanel: function (event) {
// grab the hash tag from address plugin event
var hashtag = event.pathNames[0];
// get the correct tab item, if no hashtag, get the first tab item
var tab = (hashtag) ? $('#tabs li a[href=#' + hashtag + ']') : $('#tabs li:first a');
// reset everything to default
$('#tabs li').removeClass('active');
$('#panels .panel').hide();
// if hashtag is found
if (hashtag) {
// set current tab item active and display correct panel
tab.parent().addClass('active');
$('#panels .panel:eq(' + (tab.parent().index()) + ')').show();
} else {
// set the first tab item and first panel
$('#tabs li:first').addClass('active');
$('#panels .panel:first').show();
}
// change the page title to current selected tab
document.title = tab.attr('title');
}
}
// Execute this script!
QTABS.init();
</script>
</head>
<body>
<div id="pageContainer">
<div id="header">
<h3>Spencer K. Edwards</h3>
</div>
<div id="allTabs">
<div id="tabs" class="clearfix">
<ul>
<li><a href="#site" title="Site Design">Site Design</a></li>
<li><a href="#HCI" title="Human Computer Interaction">HCI/UX Documentation</a></li>
<li><a href="#freeD" title="Free Designs">Free Designs</a></li>
</ul>
</div>
<div id="panels">
<div class="panel-wrapper">
<div class="panel">
<h2>Website Design Works</h2>
<p>Below you will find various website designs I put together to this point. Each of these models were created following a strict design process. The software used for these prototypes was Adobe Photoshop. Click the images to enlarge.</p><p>
<table cellspacing="10" cellpadding="20">
<tr><td><a href="images/design1.jpg" rel="lightbox[web]" title="Personal site prototype for Professor John H. Cushman"><img src="images/cushThumb.jpg" height="174" width="250" alt="cushsite"/></a></td>
<td><a href="images/personal site.png" rel="lightbox[web]" title="First prototype for my Portfolio site"><img src="images/persThumb.png" height="158" width="250" alt="perssite"/></a></td>
<td><a href="images/recent site.png" rel="lightbox[web]" title="Site prototype for Authority Automotive Detailing"><img src="images/recentThumb.png" height="116" width="250" alt="recsite"/></a></td></tr>
<tr><td><a href="images/canwear3.jpg" rel="lightbox[web]" title="Site prototype for Canwear Apparel"><img src="images/canThumb.jpg" height="187" width="250" alt="cansite"/></a></td>
</tr>
</table>
</div>
<div class="panel">
<h2>Panel 2</h2>
<p>Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus.</p><p><a href="#tab3">Go to Tab3</a></p>
</div>
<div class="panel">
<h2>Panel 3</h2>
<p>Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio. Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor lectus condimentum laoreet. Nunc eu ullamcorper orci. Quisque eget odio ac lectus vestibulum faucibus eget in metus. In pellentesque faucibus vestibulum. Nulla at nulla justo, eget luctus tortor. Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus.</p><p><a href="#tab1">Back to Tab1</a></p>
</div>
</div>
</div> <!-- //#panels -->
</div>
</div>
</body>
</html>
第 2 部分---->css
ul { list-style:none;
}
#tabs {
margin-top:200px;
}
#tabs ul {
list-style:none;
margin:0;
padding:0;
}
#tabs ul li {
float:left;
}
#tabs ul li a {
display:block;
padding:5px 10px;
font-weight:bold;
color:#0C0;
text-decoration:none;
font-size:120%;
}
#tabs ul li.active a {
background:#000;
color:#fff;
}
#panels {
width:100%;
background:#000;
opacity:.7;
}
#panels .panel-wrapper {
padding:10px;
}
#panels .panel {
color:#CCC;
}
#panels .panel h2 {
margin:0 0 10px 0;
}
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
/*
* CSS3 Styling
*/
#tabs ul li a {
border-top-left-radius : 5px;
border-top-right-radius : 5px;
}
#panels {
border-bottom-left-radius : 5px;
border-bottom-right-radius : 5px;
}
你需要选择一个jQuery库或另一个。通过在页面上运行两者，您将面临两个版本可能相互冲突的风险。
如果是选项卡未正确显示，请删除您的代码，看看它是否在jQuery之前的那些浏览器中正确显示。如果CSS都是正确的，那么把jQuery放回去。IT可能也是一个聪明的主意，稍微清理一下你的CSS。虽然你拥有的不一定是错的，但它有点混乱。
乍一看，我没有在您的jQuery中看到任何错误。它可能只是重复的版本条目。通过错误控制台运行它，以确保没有语法错误。
如果您的页面在某些浏览器中呈现方式不同，请先查看 CSS。
考虑取出所有 javascript，并努力让 CSS 在各种浏览器中正确显示选项卡。 然后添加 JS。