2012-02-27 98 views
-5

我基本上完全拋棄了,認爲我可能有一些衝突的JavaScript,這可能解釋了爲什麼我從這裏的每個人獲得的幫助都沒有成功。基本上 - 背景顏色不會改變,當鏈接ID爲#pagename2 &#pagename3,我希望隱藏div#黑色,直到導航選項被點擊...可能存在衝突javascript

我的帖子很多是JavaScript,但如果有人有任何時間,我會永遠感激! -

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
"http://www.w3.org/TR/html4/strict.dtd"> 
<head profile="http://gmpg.org/xfn/11"> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>Steve A Tattoo Artist | Just another WordPress site</title> 
<link rel="stylesheet" href="http://www.steveatattooartist.com/wp-content/themes/blue-and-grey/style.css" type="text/css" media="screen" /> 
<link href='http://fonts.googleapis.com/css?family=EB+Garamond' rel='stylesheet' type='text/css'> 
<!--[if lt ie 8]><link rel="stylesheet" href="http://www.steveatattooartist.com/wp-content/themes/blue-and-grey/styles/ie7.css" type="text/css" /><![endif]--> 
<!--[if lt ie 7]><link rel="stylesheet" href="http://www.steveatattooartist.com/wp-content/themes/blue-and-grey/styles/ie6.css" type="text/css" /><![endif]--> 
<link rel="pingback" href="http://www.steveatattooartist.com/xmlrpc.php" /> 

<!------- DEMO CSS LINKS ---------> 
<link href="http:/www.steveatattooartist.com/wp-content/themes/blue-and-grey/demo.css" rel="stylesheet" type="text/css"/> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> 

<!------- MAIN NAV SLIDER ---------> 
<script src="jquery-1.2.6.min.js" type="text/javascript"></script> 
<script src="jquery.scrollTo.js" type="text/javascript"></script> 
<script src="jquery.localscroll.js" type="text/javascript"></script> 
<script src="jquery.serialScroll.js" type="text/javascript"></script> 
<script type="text/javascript" src="jquery.easing.compatibility.js"></script> 

<!------- FANCY BOX REFS ---------> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script> 

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" /> 

<!------- COLOR CHANGER ---------> 
<script> 
$("#secondpagename, #thirdpagename").click(function(e){ 
$("#blackandwhite").css(backgroundColor: '#000000'); 
    e.preventDefault() 
}); 
</script> 

<!------- FANCY BOX JAVA ---------> 
<script> 
jQuery(document).ready(function() { 
/* This is basic - uses default settings */ 
$("a#single_image").fancybox(); 

/* Using custom settings */ 
$("a#inline").fancybox({ 
    'hideOnContentClick': true 
}); 

/* Apply fancybox to multiple items */ 
$("a.group").fancybox({ 
    'transitionIn' : 'elastic', 
    'transitionOut' : 'elastic', 
    'speedIn'  : 600, 
    'speedOut'  : 200, 
    'overlayShow' : false 
}); 
}); 
</script> 

<!------- MAIN SLIDER JAVA ---------> 
<script> 
$(document).ready(function() { 
$(".bgcolor").click(function() { 
$("#blackandwhite").css(backgroundColor: '#000000'); 
}); 

var $scroll = $('#slider .scroll'); 
$('#slider .navigation').find('a').click(selectNav); 
function selectNav() { 
    $(this) 
    .parents('ul:first') // find the first UL parent 
     .find('a') // find all the A elements 
     .removeClass('selected') // remove from all 
     .end() // go back to all A elements 
    .end() // go back to 'this' element 
    .addClass('selected'); 
} 
function trigger(data) { 
    var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0); 
    selectNav.call(el); 
} 
if (window.location.hash) { 
    trigger({ id : window.location.hash.substr(1)}); 
} else { 
    $('#slider .navigation a:first').click(); 
} 
//--document 
var $panels = $('#slider .scrollContainer > div'); 
var $container = $('#slider .scrollContainer'); 

// if false, we'll float all the panels left and fix the width 
// of the container 
var horizontal = true; 

// float the panels left if we're going horizontal 
if (horizontal) { 
    $panels.css({ 
    'float' : 'left', 
    'position' : 'relative' // IE fix to ensure overflow is hidden 
    }); 

    // calculate a new width for the container (so it holds all panels) 
    $container.css('width', $panels[0].offsetWidth * $panels.length); 
} 

// collect the scroll object, at the same time apply the hidden overflow 
// to remove the default scrollbars that will appear 
var $scroll = $('#slider .scroll').css('overflow', 'hidden'); 

// apply our left + right buttons 
$scroll 
    .before('<img class="scrollButtons left" src="images/scroll_left.png" />') 
    .after('<img class="scrollButtons right" src="images/scroll_right.png" />'); 

// handle nav selection 
function selectNav() { 
    $(this) 
    .parents('ul:first') 
     .find('a') 
     .removeClass('selected') 
     .end() 
    .end() 
    .addClass('selected'); 
} 

$('#slider .navigation').find('a').click(selectNav); 

// go find the navigation link that has this target and select the nav 
function trigger(data) { 
var el = $('#slider .navigation').find('a[href$="' + data.id + '"]').get(0); 
selectNav.call(el); 
} 

if (window.location.hash) { 
trigger({ id : window.location.hash.substr(1) }); 
} else { 
$('ul.navigation a:first').click(); 
} 

// offset is used to move to *exactly* the right place, since I'm using 
// padding on my example, I need to subtract the amount of padding to 
// the offset. Try removing this to get a good idea of the effect 
var offset = parseInt((horizontal ? 
$container.css('paddingTop') : 
$container.css('paddingLeft')) 
|| 0) * -1; 


var scrollOptions = { 
target: $scroll, // the element that has the overflow 

// can be a selector which will be relative to the target 
items: $panels, 

navigation: '.navigation a', 

// selectors are NOT relative to document, i.e. make sure they're unique 
prev: 'img.left', 
next: 'img.right', 

// allow the scroll effect to run both directions 
    axis: 'xy', 

onAfter: trigger, // our final callback 

offset: offset, 

// duration of the sliding effect 
duration: 1500, 

easing: 'swing' 
}; 

// apply serialScroll to the slider - we chose this plugin because it 
// supports// the indexed next and previous scroll along with hooking 
// in to our navigation. 
$('#slider').serialScroll(scrollOptions); 

// now apply localScroll to hook any other arbitrary links to trigger 
// the effect 
$.localScroll(scrollOptions); 

// finally, if the URL has a hash, move the slider in to position, 
// setting the duration to 1 because I don't want it to scroll in the 
// very first page load. We don't always need this, but it ensures 
// the positioning is absolutely spot on when the pages loads. 
scrollOptions.duration = 1; 
$.localScroll.hash(scrollOptions); 

}); 

</script> 

<!------- MAIN TOP NAV SCROLLING ---------> 

<script> 
$(window).scroll(function() { 
    if ($(this).scrollTop() >= 591) { 
     $(".altstevenav:hidden").show(); 
    } 
    else { 
     $(".altstevenav:visible").hide(); 
    } 
}); 

$(window).scroll(function() { 
    if ($(this).scrollTop() >= 591) { 
     $(".topwhiteborder:hidden").show(); 
    } 
    else { 
     $(".topwhiteborder:visible").hide(); 
    } 
}); 
</script> 

<!------- END OF DEMO CSS LINKS ---------> 

<link rel="alternate" type="application/rss+xml" title="Steve A Tattoo Artist &raquo; Feed" href="http://www.steveatattooartist.com/?feed=rss2" /> 
<link rel="alternate" type="application/rss+xml" title="Steve A Tattoo Artist &raquo; Comments Feed" href="http://www.steveatattooartist.com/?feed=comments-rss2" /> 
<link rel='stylesheet' id='jquery.fancybox-css' href='http://www.steveatattooartist.com/wp-content/plugins/fancy-box/jquery.fancybox.css?ver=1.2.6' type='text/css' media='all' /> 
<link rel='stylesheet' id='admin-bar-css' href='http://www.steveatattooartist.com/wp-includes/css/admin-bar.css?ver=20111209' type='text/css' media='all' /> 
<script type='text/javascript' src='http://www.steveatattooartist.com/wp-includes/js/jquery/jquery.js?ver=1.7.1'></script> 
<script type='text/javascript' src='http://www.steveatattooartist.com/wp-content/plugins/fancy-box/jquery.fancybox.js?ver=1.2.6'></script> 
<script type='text/javascript' src='http://www.steveatattooartist.com/wp-content/plugins/fancy-box/jquery.easing.js?ver=1.3'></script> 
<script type='text/javascript' src='http://www.steveatattooartist.com/wp-includes/js/comment-reply.js?ver=20090102'></script> 
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.steveatattooartist.com/xmlrpc.php?rsd" /> 
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.steveatattooartist.com/wp-includes/wlwmanifest.xml" /> 
<meta name="generator" content="WordPress 3.3.1" /> 

<link rel='canonical' href='http://www.steveatattooartist.com/' /> 
<script type="text/javascript"> 
    jQuery(document).ready(function($){ 
     var select = $('a[href$=".bmp"],a[href$=".gif"],a[href$=".jpg"],a[href$=".jpeg"],a[href$=".png"],a[href$=".BMP"],a[href$=".GIF"],a[href$=".JPG"],a[href$=".JPEG"],a[href$=".PNG"]'); 
     select.attr('rel', 'fancybox'); 
     select.fancybox(); 
    }); 
</script> 
    <style type="text/css">.recentcomments a{display:inline !important;padding:0 !important;margin:0 !important;}</style> 
<style type="text/css" media="print">#wpadminbar { display:none; }</style> 
<style type="text/css" media="screen"> 
    html { margin-top: 28px !important; } 
    * html body { margin-top: 28px !important; } 
</style> 
</head> 
<body class="home page page-id-2 page-template-default logged-in admin-bar"> 
<div class="header"> 

</div> 
<div class="content"> 
    <div class="main">    

<div class="simage"><img src="http://www.steveatattooartist.com/wp-content/uploads/2012/02/skull.jpg" alt="" /></div> 
<div class="stitle">The <span style="color:#ffc600; font-family: 'EB Garamond', serif;">Illustrated Man</span> II</div> 
<div style="clear:both;"></div> 
<div class="squote">&quot;We are all tattooed in our cradles with the beliefs of our tribe; the record may seem superficial, but it is indelible.&quot;</div> 

<!---------------------------------------------------> 
<!------------------ POP UP MENU --------------------> 
<div class="altstevenav" style="display:none"> 
<div class="stevenav"> 
<ul class="navigation"> 
<li><a href="#firstpagename">Steve A</a></li> 

<li><a href="#secondpagename" class="bgcolor">Tattoos</a></li> 
<li><a href="#thirdpagename" class="bgcolor">Sketchbook</a></li> 
</ul> 
</div> 
</div> 

</div> <!------------------------ MAIN CLOSING DIV ---------------------------> 
</div> <!------------------------ CONTENT CLOSING DIV ---------------------------> 

<div id="slider"> 
<div class="delstevenav"> 
<div class="stevenav"> 
<ul class="navigation"> 

<li><a href="#firstpagename" class="bgcolor">Steve A</a></li> 
<li><a href="#secondpagename" class="bgcolor">Tattoos</a></li> 
<li><a href="#thirdpagename" class="bgcolor">Sketchbook</a></li> 
</ul> 
</div> 
</div> 

<div id="black"> 
<div style="width:968px; margin: 0 auto;"> 

<!---------------------------------------------------> 
<!-------------- SLDIER AND MAIN MENU ---------------> 

<!------------------- element with overflow applied -------------------> 

<div class="scroll"> 
<!---------------- the element that will be scrolled during the effect --------------> 
<div class="scrollContainer"> 
<!----------------- our individual panels -----------------> 

<div class="panel" id="firstpagename" style="color:#000000;"> 
<div style="width:515px; float:left;"> 
<img src="http://www.steveatattooartist.com/wp-content/uploads/2012/02/bio-pic1.jpg" width="425" alt="Biography Image" /> 
<br /><br /> 
<img src="http://www.steveatattooartist.com/wp-content/uploads/2012/02/bio-pic2.jpg" width="425" alt="Biography Image" /> 
<br /><br /> 
<img src="http://www.steveatattooartist.com/wp-content/uploads/2012/02/bio-pic3.jpg" width="425" alt="Biography Image" /> 
</div> 
<div style="width:350px; float:left; text-align:left;"> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non lorem quam, at posuere lectus. Phasellus et est eget nisl vulputate sodales ut vel mi. Cras non orci nisl. Cras non mi suscipit tellus porta iaculis at consequat nulla.Phasellus bibendum rhoncus risus, placerat posuere est interdum in. Aliquam erat volutpat. Etiam laoreet libero quis enim iaculis et aliquam ligula molestie. Integer luctus vulputate interdum. Vivamus pulvinar neque et nunc porttitor dictum.<br /> 

<br /> 
Ut commodo nibh vitae augue consectetur molestie. Vestibulum quis metus eros. Suspendisse vel arcu mi, at placerat lacus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Curabitur vehicula quam non lorem sodales nec pellentesque elit imperdiet. Fusce non orci dolor. Nunc id velit diam.<br /> 
<br /> 
Integer facilisis arcu ut leo eleifend sagittis. Aliquam erat volutpat. In eu iaculis sem. Fusce non diam et purus pulvinar varius quis a ligula. Maecenas tortor mi, mattis vitae tincidunt sit amet, lobortis a metus. Aenean vitae laoreet sem. Nullam quis turpis neque. Donec dapibus dignissim ligula ac feugiat. Proin mi lorem, sagittis at sollicitudin sit amet, rhoncus a odio. Fusce malesuada enim a diam consequat rhoncus. Mauris venenatis arcu a nulla tempor quis venenatis velit semper. Integer a tortor gravida nibh bibendum accumsan in vitae turpis. Etiam ac purus sit amet diam feugiat commodo non eget felis. Vestibulum magna magna, laoreet accumsan accumsan eget, hendrerit vitae arcu.<br /> 
<br /> 
Etiam sed lacus sed nulla pharetra viverra. Praesent dapibus nibh eleifend sapien viverra sagittis. Curabitur tempor auctor erat, ut blandit lacus accumsan vitae. Donec a risus vel purus accumsan sollicitudin ut at massa. Aenean elementum urna quis massa convallis eu luctus massa lacinia. Proin nisl metus, mollis a laoreet nec, tempor a mauris. Pellentesque a erat metus. Suspendisse quis vulputater diam. Mauris turpis sapien, sagittis id vehicula sit amet, fringilla a mi. Phasellus id orci et purus tincidunt facilisis eu sit amet nulla. Sed id magna vitae quam feugiat tempus. Donec vel mauris eu ligula aliquet rutrum ut in nisl. Vivamus ut viverra mi. Donec ut porta eros. Aliquam molestie turpis tempus tortor aliquam fringilla. Nam vitae nisi urna.<br /> 
<br /> 
Proin hendrerit interdum erat, vitae varius dui mollis id. Proin vitae lorem a ante mollis euismod et id ante. Etiam sit amet urna quis diam egestas rutrum non sit amet arcu. Sed est nulla, rhoncus eget molestie in, pulvinar eget lorem. Suspendisse sit amet tortor est. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Phasellus dolor sapien, euismod a tristique in, faucibus vitae sem. Proin ipsum nunc, consectetur vitae mollis in, condimentum non tortor. In ultrices adipiscing ligula ut fringilla. Nullam ultrices tempus lorem euismod elementum. Quisque aliquet sollicitudin vulputate. Nullam id faucibus libero. Aenean sodales pellentesque sagittis. Vestibulum dignissim fermentum nibh, ut interdum magna fringilla eu. Donec luctus condimentum purus eu porta.</div> 
</div> 

<div class="panel" id="secondpagename" style="background-color:#000000; color:#FFFFFF;"> 
<p> 
<p>&nbsp;</p> 

2Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s. 
</p> 
</div> 
<div class="panel" id="thirdpagename" style="background-color:#000000; color:#FFFFFF;"> 
<p> 
<p>&nbsp;</p> 
3Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s. 
</p> 
</div> 

</div></div> 


</div> 
</div> 
</div> 
<!----------------------------------------------------------> 

<!-------------- END OF SLDIER AND MAIN MENU ---------------> 

<div style="display:none"><div id="data"><h2>Contact Steve A</h2><p></p></p></div></div> 
<div style="display:none"><div id="copy" style="width:400px;"><h2>Copyright Information:</h2><p><p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry&#8217;s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> 
</p></div></div> 

<script type='text/javascript' src='http://www.steveatattooartist.com/wp-includes/js/admin-bar.js?ver=20111130'></script> 
     <div id="wpadminbar" class="nojq nojs" role="navigation"> 
      <div class="quicklinks"> 
       <ul id="wp-admin-bar-root-default" class="ab-top-menu"> 

     <li id="wp-admin-bar-wp-logo" class="menupop"><a class="ab-item" tabindex="10" aria-haspopup="true" href="http://www.steveatattooartist.com/wp-admin/about.php" title="About WordPress"><span class="ab-icon"></span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-wp-logo-default" class="ab-submenu"> 
     <li id="wp-admin-bar-about" class=""><a class="ab-item" tabindex="10" href="http://www.steveatattooartist.com/wp-admin/about.php">About WordPress</a>  </li></ul><ul id="wp-admin-bar-wp-logo-external" class="ab-sub-secondary ab-submenu"> 
     <li id="wp-admin-bar-wporg" class=""><a class="ab-item" tabindex="10" href="http://wordpress.org">WordPress.org</a>  </li> 
     <li id="wp-admin-bar-documentation" class=""><a class="ab-item" tabindex="10" href="http://codex.wordpress.org">Documentation</a>  </li> 
     <li id="wp-admin-bar-support-forums" class=""><a class="ab-item" tabindex="10" href="http://wordpress.org/support/">Support Forums</a>  </li> 

     <li id="wp-admin-bar-feedback" class=""><a class="ab-item" tabindex="10" href="http://wordpress.org/support/forum/requests-and-feedback">Feedback</a>  </li></ul></div>  </li> 
     <li id="wp-admin-bar-site-name" class="menupop"><a class="ab-item" tabindex="10" aria-haspopup="true" href="http://www.steveatattooartist.com/wp-admin/">Steve A Tattoo Artist</a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-site-name-default" class="ab-submenu"> 
     <li id="wp-admin-bar-dashboard" class=""><a class="ab-item" tabindex="10" href="http://www.steveatattooartist.com/wp-admin/">Dashboard</a>  </li></ul><ul id="wp-admin-bar-appearance" class=" ab-submenu"> 
     <li id="wp-admin-bar-themes" class=""><a class="ab-item" tabindex="10" href="http://www.steveatattooartist.com/wp-admin/themes.php">Themes</a>  </li> 
     <li id="wp-admin-bar-widgets" class=""><a class="ab-item" tabindex="10" href="http://www.steveatattooartist.com/wp-admin/widgets.php">Widgets</a>  </li> 

     <li id="wp-admin-bar-menus" class=""><a class="ab-item" tabindex="10" href="http://www.steveatattooartist.com/wp-admin/nav-menus.php">Menus</a>  </li></ul></div>  </li> 
     <li id="wp-admin-bar-updates" class=""><a class="ab-item" tabindex="10" href="http://www.steveatattooartist.com/wp-admin/update-core.php" title="1 Plugin Update"><span class="ab-icon"></span><span class="ab-label">1</span></a>  </li> 
     <li id="wp-admin-bar-comments" class=""><a class="ab-item" tabindex="10" href="http://www.steveatattooartist.com/wp-admin/edit-comments.php" title="0 comments awaiting moderation"><span class="ab-icon"></span><span id="ab-awaiting-mod" class="ab-label awaiting-mod pending-count count-0">0</span></a>  </li> 
     <li id="wp-admin-bar-new-content" class="menupop"><a class="ab-item" tabindex="10" aria-haspopup="true" href="http://www.steveatattooartist.com/wp-admin/post-new.php" title="Add New"><span class="ab-icon"></span><span class="ab-label">New</span></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-new-content-default" class="ab-submenu"> 
     <li id="wp-admin-bar-new-post" class=""><a class="ab-item" tabindex="10" href="http://www.steveatattooartist.com/wp-admin/post-new.php">Post</a>  </li> 

     <li id="wp-admin-bar-new-media" class=""><a class="ab-item" tabindex="10" href="http://www.steveatattooartist.com/wp-admin/media-new.php">Media</a>  </li> 
     <li id="wp-admin-bar-new-link" class=""><a class="ab-item" tabindex="10" href="http://www.steveatattooartist.com/wp-admin/link-add.php">Link</a>  </li> 
     <li id="wp-admin-bar-new-page" class=""><a class="ab-item" tabindex="10" href="http://www.steveatattooartist.com/wp-admin/post-new.php?post_type=page">Page</a>  </li> 
     <li id="wp-admin-bar-new-user" class=""><a class="ab-item" tabindex="10" href="http://www.steveatattooartist.com/wp-admin/user-new.php">User</a>  </li></ul></div>  </li> 

     <li id="wp-admin-bar-edit" class=""><a class="ab-item" tabindex="10" href="http://www.steveatattooartist.com/wp-admin/post.php?post=2&#038;action=edit">Edit Page</a>  </li></ul><ul id="wp-admin-bar-top-secondary" class="ab-top-secondary ab-top-menu"> 
     <li id="wp-admin-bar-search" class=" admin-bar-search"><div class="ab-item ab-empty-item" tabindex="-1"><form action="http://www.steveatattooartist.com/" method="get" id="adminbarsearch"><input class="adminbar-input" name="s" id="adminbar-search" tabindex="10" type="text" value="" maxlength="150" /><input type="submit" class="adminbar-button" value="Search"/></form></div>  </li> 
     <li id="wp-admin-bar-my-account" class="menupop with-avatar"><a class="ab-item" tabindex="10" aria-haspopup="true" href="http://www.steveatattooartist.com/wp-admin/profile.php" title="My Account">Howdy, clairewild<img alt='' src='http://0.gravatar.com/avatar/63344d548f5d2204635a85802d53cf97?s=16&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D16&amp;r=G' class='avatar avatar-16 photo' height='16' width='16' /></a><div class="ab-sub-wrapper"><ul id="wp-admin-bar-user-actions" class=" ab-submenu"> 
     <li id="wp-admin-bar-user-info" class=""><a class="ab-item" tabindex="-1" href="http://www.steveatattooartist.com/wp-admin/profile.php"><img alt='' src='http://0.gravatar.com/avatar/63344d548f5d2204635a85802d53cf97?s=64&amp;d=http%3A%2F%2F0.gravatar.com%2Favatar%2Fad516503a11cd5ca435acc9bb6523536%3Fs%3D64&amp;r=G' class='avatar avatar-64 photo' height='64' width='64' /><span class='display-name'>clairewild</span></a>  </li> 
     <li id="wp-admin-bar-edit-profile" class=""><a class="ab-item" tabindex="10" href="http://www.steveatattooartist.com/wp-admin/profile.php">Edit My Profile</a>  </li> 

     <li id="wp-admin-bar-logout" class=""><a class="ab-item" tabindex="10" href="http://www.steveatattooartist.com/wp-login.php?action=logout&#038;_wpnonce=9295d2f263">Log Out</a>  </li></ul></div>  </li></ul>   </div> 
     </div> 


<div class="menu"> 
<div class="middle"> 
<ul style="margin-top:6px;"> 
<li><a id="inline" href="#data">Contact</a></li> 
<li><a href="http://www.steve-a.co.uk/">The Illustrated Man I</a></li> 

<li><a href="http://www.indelible-tattoo.co.uk/">Indeliable Tattoo Studio</a></li> 
<li><a href="http://www.bournemouthtattooconvention.com/artists.php">Bournemouth Tattoo Convention</a></li> 
</ul> 
<ul style="margin-top:5px;"> 
<li><a href="https://www.facebook.com/profile.php?id=1805246243"><img src="http://www.steveatattooartist.com/wp-content/uploads/2012/02/fb.jpg" height="17" width="16" alt="facebook icon for steveatattooartist" /></a></li> 
<li><a id="inline" href="#copy"><img src="http://www.steveatattooartist.com/wp-content/uploads/2012/02/copyright.jpg" height="17" width="17" alt="" /></a></li> 
</ul> 


</div> 
</div> 
</div> 

</body> 
</html> 

這是我的源代碼,或者鏈接到該網站可以在這裏找到: http://steveatattooartist.com

+4

您有** FOUR **不同主要版本的jQuery被加載在那裏!挑一個,並使代碼與它兼容! – Quentin 2012-02-27 14:34:25

+0

您的網站無效[HTML 4.01 Strict](http://validator.w3.org/check?uri=http%3A%2F%2Fwww.steveatattooartist.com%2F&charset=%28detect+automatically%29&doctype=Inline&group= 0)。嘗試提供[sscc示例](http://sscce.org/)。 @Quentin:四位?這就像故意殺害小貓一樣。這是殘酷的,可怕的,絕對不必要的。 OP,選擇*一個*。 – Zeta 2012-02-27 14:37:08

+3

1.2,1.3,1.5和1.7,我可以看到。看起來令人擔憂的是複製/粘貼而不理解。 – Quentin 2012-02-27 14:40:38

回答

2

而且,你爲什麼包括jQuery的從3個不同的地點/版本?

嘗試刪除:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 

<script src="jquery-1.2.6.min.js" type="text/javascript"></script> 

這應該只是讓你用1.5的參考,這 '可能' 沿

2

嗯,乍一看,在JavaScript控制檯,使用此代碼行不糾正:

$("#blackandwhite").css(backgroundColor: '#000000'); 


正確的語法或者是.css(propertyName, value)是這樣的:

$("#blackandwhite").css('backgroundColor', '#000000'); 

或對象文本.css(map)像這樣(注意{ }):

$("#blackandwhite").css({ backgroundColor: '#000000' }); 


jQuery .css()

+0

完成了這個!謝謝! – 2012-02-27 14:53:22

2

關閉我的頭頂幫助的事情,使用Wordpress加載的jQuery使用「無衝突」模式,因此您不能使用$()您必須使用jQuery()或在代碼周圍放置一個閉包,如

(function ($) { 
    // code goes here 
})(jQuery)