0
クリックイベントが正しく発生しないという問題があります。私が参照しているクリックイベントは、#salesに添付されたページの一番下にあるものです。私はmicrosoft.comを使って、私がナビゲートしようとしていたページではないことを確かめました。何か助けていただければ幸いです。クリックイベントでwindows.locationが機能しない
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Maxxim - Welcome</title>
</head>
<script type="text/javascript" language="javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript" src="js/intro.js"></script>
<link rel="stylesheet" type="text/css" href="css/intro.css">
<body>
<div class="intro-no-js">
<img src="imgs/intro/Intro-logo.gif" alt="Maxxim Logo">
<a href="sales-and-marketing.html" title="Sales & Marketing"><img src="imgs/intro/Intro-sales-butt.gif" alt="Sales & Marketing" id="sales"></a>
<a href="design.html" title="Design"><img src="imgs/intro/Intro-design-butt.gif" alt="Design" id="design"></a>
</div>
<div class="intro-javascript">
<div id="intro-arrows"></div>
<div id="intro-max"></div>
<div id="intro-xim"></div>
<div class="intro-bottom">
<div id="pants"></div>
<div id="sales"></div>
<div id="design"></div>
</div>
</div>
</body>
</html>
そして、ここでCSSです：
// JavaScript Document
$(document).ready(function() {
$(".intro-no-js").css("visibility","hidden");
$(".intro-javascript").css("visibility","visible");
//defines how max should be animated
jQuery.fn.maxanimate = function() {
this.css("position","absolute");
var t = (($(window).height() - this.outerHeight())/2) + $(window).scrollTop();
var l = (($(window).width() - this.outerWidth())/2) + $(window).scrollLeft();
$(this).animate({
top: t,
left: l-79.5
}, 500);
return this;
}
//defines how xim should be animated
jQuery.fn.ximanimate = function() {
this.css("position","absolute");
var t = (($(window).height() - this.outerHeight())/2) + $(window).scrollTop();
var r = (($(window).width() - this.outerWidth())/2) + $(window).scrollLeft();
$(this).animate({
top: t,
left: r+78.5
}, 500);
return this;
}
//defines how top arrows should be animated
jQuery.fn.arrowsanimate = function() {
this.css("position","absolute");
var t = (($(window).height() - this.outerHeight())/2) + $(window).scrollTop();
var l = (($(window).width() - this.outerWidth())/2) + $(window).scrollLeft();
$(this).animate({
top: t-25,
left: l
}, 500);
return this;
}
//defines how bottom section should be animated
jQuery.fn.animatebottom = function() {
this.css("position","absolute");
var b = (($(window).height() - this.outerHeight())/2) + $(window).scrollTop();
var l = (($(window).width() - this.outerWidth())/2) + $(window).scrollLeft();
$(this).animate({
bottom: b-22,
left: l
}, 500);
return this;
}
//max starting co-ordinates
var maxl = $(window).width() - 157;
var maxt = ($(window).height() - $("#intro-max").outerHeight())/2;
//xim starting co-ordinates
var ximr = $(window).width() - 159;
var ximt = ($(window).height() - $("#intro-xim").outerHeight())/2;
//arrows starting co-ordinates
var al = (($(window).width() - $("#intro-xim").outerWidth())/2) + $(window).scrollLeft()+ 35;
var at = 0;
//bottom of logo starting co-ordinates
var bl = (($(window).width() - $("#intro-xim").outerWidth())/2) + $(window).scrollLeft()-50;
var bt = 0;
//set initial co-ordinates for all divs
$("#intro-arrows").css({position: "absolute",top: at,left: al});
$("#intro-max").css({position: "absolute",top: maxt,right: maxl});
$("#intro-xim").css({position: "absolute",top: ximt,left: ximr});
$(".intro-bottom").css({position: "absolute", bottom: bt, left: bl});
//lets bring it all to life!
$("#intro-max").maxanimate();
$("#intro-xim").ximanimate();
$("#intro-arrows").arrowsanimate();
$(".intro-bottom").animatebottom();
$("#sales").click(function() {
window.location = "http://www.microsoft.com";
});
});
私のマークアップは以下の通りである
@charset "utf-8";
/* CSS Document */
body
{
background-color: #000;
margin: 0 0;
}
/* Styling for if javascript is disabled */
.intro-no-js
{
width: 317px;
margin: 0 auto;
position: relative;
top: 275px;
}
.intro-no-js sales
{
float: left;
}
.intro-no-js design
{
float: left;
}
.intro-no-js img
{
border: none;
}
/* Styling for animation if javascript is enabled */
.intro-javascript
{
visibility: visible;
}
#intro-arrows
{
background-image:url(../imgs/intro/Intro-logo_top.png);
width: 53px;
height: 13px;
}
#intro-max
{
background-image:url(../imgs/intro/Intro-logo_left.png);
width: 159px;
height: 72px;
}
#intro-xim
{
background-image:url(../imgs/intro/Intro-logo_right.png);
width: 157px;
height: 72px;
}
.intro-bottom
{
width: 317px;
}
#pants
{
margin: 0 auto;
background-image: url(../imgs/intro/Intro-logo_bottom.png);
width: 80px;
height: 37px;
}
#sales
{
background-image: url(../imgs/intro/Intro-sales-butt.gif);
width: 218px;
height: 8px;
float: left;
}
#sales:hover
{
background-image: url(../imgs/intro/Intro-sales-butt-o.gif);
}
#design
{
background-image:url(../imgs/intro/Intro-design-butt.gif);
width: 99px;
height: 8px;
float: left;
}
#design:hover
{
background-image:url(../imgs/intro/Intro-design-butt-o.gif);
}
onclick関数はトリガしますか？また、$ .fn名前空間の分かりやすい使い方についてはhttp://docs.jquery.com/Plugins/Authoringを参照してください。 – CBusBus
一部のHTMLコードを表示できますか？これは、いくつかの理由で起きている可能性があります...クリック（alert）（ "foo"）;をクリックするだけで何が起きますか？ –
これは現在のページのURLは何ですか？ – James