我使用 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;
}