我的意图是在单击 div 时向页眉添加一个类。我已经包括了我正在使用的网站，只是为了让事情变得更容易:
网址 - http://itsmontoya.com/work/iM/
我在标题中添加了一个“扩展”类。这是为了显示按下按钮后导航的外观。我创建了一个简单的 Javascript，它应该在我单击按钮时提供警报。我似乎无法让它工作。对我做错了什么有什么想法吗？
谢谢!
编辑 - 单击按钮 div 时，我能够让警报正常工作。我非常接近完成这个! :) 现在我遇到了变量没有正确传递的问题。
<script type= "text/javascript">
var expanded = false;
function btnClick(){
alert('The variable expanded is '+expanded);
if(expanded === false) {
document.getElementById("header").className = "expanded";
var expanded = true;
} else {
document.getElementById("header").className.replace(/\bexpanded\b/,'');
var expanded = false;
}
};
</script>
我正在更新 ftp 服务器 :)
最佳答案
使用 jQuery 时，您必须以元素已经加载的方式绑定(bind)事件。
你有:
<script type= "text/javascript">
$("#expandBtn").click(function(){
alert('hello');
});
</script>
我想你想要的是:
<script type= "text/javascript">
$(document).ready(function(){
$("#expandBtn").click(function(){
alert('hello');
$('header').addClass('expanded');
});
});
</script>
API documentation将成为你的 friend 。第一步—— ready() .
更新
你调用了 jQuery:
$j('#header').addClass('expanded');
但是您的标记是针对 HTML5 元素的 <header> .在这种情况下，您的 jQuery 需要更改为:
$j('header').addClass('expanded');
在哪里$j是你的 jQuery 对象。更典型的是你会使用 $或 jQuery .
是时候好好研究 jQuery Selectors 了!
更新
这是您更新后的页面:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>itsMontoya</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="shortcut icon" href="/favicon.ico" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type= "text/javascript">
$(document).ready(function(){
$('.expandBtn').bind('click', function(){
$('header').toggleClass('expanded');
});
});
</script>
</head>
<body>
<div class="wrap">
<header id="header" class="">
<div class="blackBG transparent"></div>
<nav>
<ul>
<li>
Home<img src="images/home.png">
</li>
<li>
Pictures<img src="images/pictures.png">
</li>
<li>
Music<img src="images/mymusic.png">
</li>
<li>
About Me<img src="images/aboutme.png">
</li>
<li>
Resume<img src="images/resume.png">
</li>
</ul>
</nav>
<div id="logo" class="logo"><p>itsMontoya</p></div><div id="expandBtn" class="expandBtn anchor"></div>
</header>
<section class="content">
<article class="blogEntry"></article>
</section>
<footer class="anchor">
<div class="over anchor"><p>2011 itsMontoya.com</p></div>
<div class="blackBG transparent anchor under"></div>
</footer>
</div>
</body>
</html>
关于javascript - 使用 Javascript 单击 div 时向标题添加样式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7591493/