jquery隐藏元素，加载新背景
该网站的想法是将有6个独立的div类主页，一旦点击一个，我希望它上升到页面顶部，其他元素消失。我使用了两张图片来展示常规外观和悬停。对于第一个链接，我希望它加载新的背景，这样它只有一个元素。我该怎么做呢？我对jquery不是很精通：jquery隐藏元素，加载新背景,jquery,css,Jquery,Css,该网站的想法是将有6个独立的div类主页，一旦点击一个，我希望它上升到页面顶部，其他元素消失。我使用了两张图片来展示常规外观和悬停。对于第一个链接，我希望它加载新的背景，这样它只有一个元素。我该怎么做呢？我对jquery不是很精通： <html> <head> <title> Div Blocks</title> <style type="text/css"> body {
<html>
<head>
<title> Div Blocks</title>
<style type="text/css">
body {
background: url("bg.jpg");
width:1920px;
height:1000px;
font-size: 30px;
font-family:Comic Sans MS;
line-height: 1.429;
margin: 0;
padding: 0;
text-align: center;
cursor : url("nav.png"), default;
}
a{
cursor : url("nav1.png"), pointer
}
div.one a
{
position: absolute;
top:0px;
left:0px;
width: 800px;
height: 333px;
text-decoration:none;
-webkit-transition: all 2s ease-in-out; -moz-transition: all 2s ease-in-out; -o-transition: all 2s ease-in-out; -ms-transition: all 2s ease-in-out;
}
div.one a:hover
{background: url("bgalt.jpg");
background-position: 0px 0px;
}
div.one a:enabled
{background: url("branding.jpg");}
div.two a
{
position: absolute;
top:334px;
left:0px;
width: 800px;
height: 333px;
text-decoration:none;
}
div.two a:hover
{background: url("bgalt.jpg");
background-position: 0 746px;
}
div.three a
{
position: absolute;
top:667px;
left:0px;
width: 900px;
height: 333px;
text-decoration:none;
}
div.three a:hover
{background: url("bgalt.jpg");
background-position: 0 413px;
}
div.r1 a
{
position: absolute;
top:0px;
left:1120px;
width: 800px;
height: 333px;
text-decoration:none;
}
div.r1 a:hover
{background: url("bgalt.jpg");
background-position: 800px 0px;
}
div.r2 a
{
position: absolute;
top:334px;
left:1120px;
width: 900px;
height: 333px;
text-decoration:none;
}
div.r2 a:hover
{background: url("bgalt.jpg");
background-position: 800px 746px;
}
div.r3 a
{
position: absolute;
top:667px;
left:1120px;
width: 900px;
height: 333px;
text-decoration:none;
}
div.r3 a:hover
{background: url("bgalt.jpg");
background-position: 800px 413px;
}
</style>
</head>
<body>
<div id="fade">
<div class="one">
<a href="javascript:void(0)"onmousedown="myObject()"></a>
</div>
</div>
<div class="two">
<a href="#"></a>
</div>
<div class="three">
<a href="#"></a>
</div>
<div class="r1">
<a href="#"></a>
</div>
<div class="r2">
<a href="#"></a>
</div>
<div class="r3">
<a href="#"></a>
</div>
</body>
<script>
$('a').click(function ()
{
event.preventDefault();
css('background-image', 'url(' branding.jpg')');
});
</script>
分区块
身体{
背景：url（“bg.jpg”）；
宽度：1920像素；
高度：1000px；
字体大小：30px；
字体系列：Comic Sans MS；
线高：1.429；
保证金：0；
填充：0；
文本对齐：居中；
游标：url（“nav.png”），默认值；
}
a{
游标：url（“nav1.png”），指针
}
第一分区a
{
位置：绝对位置；
顶部：0px；
左：0px；
宽度：800px；
高度：333px；
文字装饰：无；
-webkit转换：所有2秒输入输出；-moz转换：所有2秒输入输出；-o转换：所有2秒输入输出；-ms转换：所有2秒输入输出；
}
第一组a：悬停
{背景：url（“bgalt.jpg”）；
背景位置：0px 0px；
}
第一分区a：启用
{背景：url（“branding.jpg”）；}
第二分区a
{
位置：绝对位置；
顶部：334px；
左：0px；
宽度：800px；
高度：333px；
文字装饰：无；
}
第二组a：悬停
{背景：url（“bgalt.jpg”）；
背景位置：0 746px；
}
第三分区a
{
位置：绝对位置；
顶部：667px；
左：0px；
宽度：900px；
高度：333px；
文字装饰：无；
}
第三组a：悬停
{背景：url（“bgalt.jpg”）；
背景位置：0 413px；
}
分区r1 a
{
位置：绝对位置；
顶部：0px；
左：1120px；
宽度：800px；
高度：333px；
文字装饰：无；
}
r1区a：悬停
{背景：url（“bgalt.jpg”）；
背景位置：800px 0px；
}
分区r2 a
{
位置：绝对位置；
顶部：334px；
左：1120px；
宽度：900px；
高度：333px；
文字装饰：无；
}
r2 a组：悬停
{背景：url（“bgalt.jpg”）；
背景位置：800px 746px；
}
r3 a分部
{
位置：绝对位置；
顶部：667px；
左：1120px；
宽度：900px；
高度：333px；
文字装饰：无；
}
第3部分a：悬停
{背景：url（“bgalt.jpg”）；
背景位置：800px413px；
}
$（'a'）。单击（函数（）
{
event.preventDefault（）；
css（'background-image'，'url（'branding.jpg'））；
});
我尝试了css，正如你从代码中看到的那样，但没有成功你可能正在寻找这个：
$('a').click(function(event) {
event.preventDefault();
$('body').css('background-image', 'url(branding.jpg)');
});
$("a").click(function(event){
event.preventDefault(); // prevent the link from changing the location
$(this)
.closest("div") // select the parent div of the link
.animate("top","0") // animation to take it to the top of the page
.siblings() // select all the siblings of the div
.hide(); // hide them
});
您需要为我提供正确的HTML内容才能向您发送正确的jQuery代码。我刚刚将您的java脚本重新格式化如下。Ass在头部的代码上方
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$('a').click(function (e){
e.preventDefault();
$(this).css('background-color', 'gray');
});
});
</script>
$（文档）.ready（函数（）{
$（'a'）。单击（函数（e）{
e、 预防默认值（）；
$（this.css（'background-color'，'gray'）；
});
});