<!DOCTYPE html>
<html>
<head>
<script src="../jQuery 1.3.2/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
$('#div1').bind('click', function(){
$('body').removeClass('large');
$('body').removeClass('small');
});
$('#div2').bind('click', function(){
$('body').addClass('large');
$('body').removeClass('small');
});
$('#div3').bind('click', function(){
$('body').addClass('small');
$('body').removeClass('large');
});
});
</script>
<style type="text/css">
#div1 {
background-color: #33FFFF;
height: 100px;
width: 100px;
}
#div2 {
background-color: #33FF00;
height: 100px;
width: 100px;
}
#div3 {
background-color: #3300FF;
height: 100px;
width: 100px;
}
body{ font-size: 12px; font-family: Arial; }
.large{
font-size:20px;
}
.small{
font-size:36px;
}
</style>
</head>
<body>
<div id="div1" class="mydiv"></div>
<div id="div2" class="mydiv"></div>
<div id="div3" class="mydiv"></div>
<div><p>dfjdlfjdlfl</p></div>
</body>
</html>
.bind()用法
点击三个颜色块,触发事件可以改变字体的大小格式等。。。。
<html>
<head>
<script src="../jQuery 1.3.2/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(function(){
$('#div1').bind('click', function(){
$('body').removeClass('large');
$('body').removeClass('small');
});
$('#div2').bind('click', function(){
$('body').addClass('large');
$('body').removeClass('small');
});
$('#div3').bind('click', function(){
$('body').addClass('small');
$('body').removeClass('large');
});
});
</script>
<style type="text/css">
#div1 {
background-color: #33FFFF;
height: 100px;
width: 100px;
}
#div2 {
background-color: #33FF00;
height: 100px;
width: 100px;
}
#div3 {
background-color: #3300FF;
height: 100px;
width: 100px;
}
body{ font-size: 12px; font-family: Arial; }
.large{
font-size:20px;
}
.small{
font-size:36px;
}
</style>
</head>
<body>
<div id="div1" class="mydiv"></div>
<div id="div2" class="mydiv"></div>
<div id="div3" class="mydiv"></div>
<div><p>dfjdlfjdlfl</p></div>
</body>
</html>
.bind()用法
点击三个颜色块,触发事件可以改变字体的大小格式等。。。。