0
[OK]をクリックして、ナビゲーションバーにリンクが含まれている左側にdivコンテナがあるウェブサイトを作成しました。右側には別のdivコンテナがあり、リンクをクリックするとコンテンツがフェードインされます。私はしかし、ページ全体をリフレッシュしたくないです。私はこれを行うコードを持っていますが、それは何らかの理由で動作しません。しかし、それは以前の空のhtml文書で働いていました。前もって感謝します。ページコンテンツのフェーディング
HTML：
<!doctype html>
<html lang="en"><head>
<link rel="stylesheet" type="text/css" href="../styless.css" />
<link rel="stylesheet" type="text/css" href="../images/jquery.fancybox-1.3.4.css" media="screen" />
<link href="../fadeStyle.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../jquery.js"></script>
<script type="text/javascript" src="../../../GJDG/js/nav.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="../images/jquery.mousewheel-3.0.4.pack.js"></script>
<script type="text/javascript" src="../images/jquery.fancybox-1.3.4.pack.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("a[rel=example_group]").fancybox({
'overlayColor' : '#000',
'overlayOpacity' : 0.9,
'titlePosition' : 'over',
'titleFormat' : function(title, currentArray, currentIndex, currentOpts) {
return '<span id="fancybox-title-over">' +(title.length ? ' ' + title : '') + '</span>';
}
});
});
</script>
<script type='text/javascript'>
$(document).ready(function(){
$("img.a").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "fast");
},
function() {
$(this).stop().animate({"opacity": "1"}, "fast");
});
$("img.c").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "fast");
},
function() {
$(this).stop().animate({"opacity": "1"}, "fast");
});
$("img.e").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "fast");
},
function() {
$(this).stop().animate({"opacity": "1"}, "fast");
});
});
</script>
<style>
body { font-family: Helvetica, Arial, sans-serif; }
.container {
width: 100%; left: 0; right: 0; top:0; bottom: 0; position: fixed; overflow: auto;
background: rgba(16,16,16,0.0);
}
</style>
</head>
<body>
<div class="container">
<div id="menu">
<img style="position:absolute; top:25px; left:50px; width:200px; height:73px" src="../../../Envy1.png">
<div style="position: absolute; top:630px; left:50px; font-size:11px; width:200px; color:#FFF">© 2012 Envy Cosmetics</div>
<div id="navBar">
<font face="abeatbyKai">
<ul id="menu-list">
<li><a class="menu_side" href="../News.html" style="text-decoration: none" id="one">News</a></li>
<li><a class="menu_side" href="../About Us.html" style="text-decoration: none" id="two">About Us</a></li>
<li><a class="menu_side" href="../Gallery.html" style="text-decoration: none" id="three">Gallery</a></li>
<li><a class="menu_side" href="../Affiliates.html" style="text-decoration: none" id="four">Affiliates</a></li>
<li><a class="menu_side" href="../Biography.html" style="text-decoration: none" id="five">Biography</a></li>
<li><a class="menu_side" href="../Contact.html" style="text-decoration: none" id="six">Contact</a></li>
</ul>
</font>
</div>
<div class="fadehover1">
<a href=""><img src="../../../twitter1.png" alt="" class="a" /></a>
<a href=""><img src="../../../twitter2.png" alt="" class="b" /></a>
</div>
<div class="fadehover2">
<a href=""><img src="../../../facebook1.png" alt="" class="c" /></a>
<a href=""><img src="../../../facebook2.png" alt="" class="d" /></a>
</div>
<div class="fadehover3">
<a href=""><img src="../../../youtube1.png" alt="" class="e" /></a>
<a href=""><img src="../../../youtube2.png" alt="" class="f" /></a>
</div>
</div>
<div id="main">
<div id="gallery1">
<a rel="example_group" href="../images/1_b.jpg" title="ENVY!"><img alt="" src="../images/1_s.jpg" /></a>
<a rel="example_group" href="../images/2_b.jpg" title="ENVY!"><img alt="" src="../images/2_s.jpg" /></a>
<a rel="example_group" href="../images/3_b.jpg" title="ENVY!"><img alt="" src="../images/3_s.jpg" /></a>
<a rel="example_group" href="../images/4_b.jpg" title="ENVY!"><img alt="" src="../images/4_s.jpg" /></a>
<a rel="example_group" href="../images/5_b.jpg" title="ENVY!"><img alt="" src="../images/5_s.jpg" /></a>
<a rel="example_group" href="../images/6_b.jpg" title="ENVY!"><img alt="" src="../images/6_s.jpg" /></a><br>
<a rel="example_group" href="../images/7_b.jpg" title="ENVY!"><img alt="" src="../images/7_s.jpg" /></a>
<a rel="example_group" href="../images/8_b.jpg" title="ENVY!"><img alt="" src="../images/8_s.jpg" /></a>
<a rel="example_group" href="../images/9_b.jpg" title="ENVY!"><img alt="" src="../images/9_s.jpg" /></a>
<a rel="example_group" href="../images/10_b.jpg" title="ENVY!"><img alt="" src="../images/10_s.jpg" /></a>
<a rel="example_group" href="../images/11_b.jpg" title="ENVY!"><img alt="" src="../images/11_s.jpg" /></a>
<a rel="example_group" href="../images/12_b.jpg" title="ENVY!"><img alt="" src="../images/12_s.jpg" /></a>
</div>
</div>
</div>
<script src="../jquery.backstretch.min.js"></script>
<script>
$.backstretch("photo1.jpg", {speed: 500});
</script>
<div id="mesh"></div>
nav.js
$(document).ready(function() {
$('#main').load($().attr('href'));
});
$('.menu_side').click(function() {
var href = $(this).attr('href');
$('#main').hide().load(href).fadeIn('fast');
return false;
});
どのビットが機能しませんか？ – Jivings
「それはうまくいきませんか？それは何をするためのものか？ JavaScriptのエラーはありますか？期待していたものとは異なる何かをしていますか？ – Jacob
ウェブサイトへのリンクをお願いします。私は裁判をしません。 – mowwwalker