-1
jqueryとcssを使用してタブを作成しましたが、6と7では正しく動作しません。タブはクリックできず、各タブのコンテンツはちょうど互いの下に表示されています。すべてのコードは次のとおりです。パート2はCSSです。タブは表示されません6と7です。それは私のjqueryや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;
}
No JSエラー？コンソール？ –
JSはインターネットセキュリティポリシーで許可されていますか？タブはFirefox/Operaで動作しますか？ – Tobi
@ user1335573 jqueryライブラリを正しく参照していますが、これも問題である可能性があります – freebird