请问怎么用jquery实现以下效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了请问怎么用jquery实现以下效果相关的知识，希望对你有一定的参考价值。
下面有4个方块，怎么使其在点击后变色（点击其他方块后，颜色转移）。请问怎么用jquery实现呢？
<html>
<style type="text/css">
<!--
#t1,#t2,#t3,#t4
height:30px;
width:50px;
background-color:#33FFFF;
float:left;
margin-left:50px;
text-align:center;
-->
</style>
<body>
<div id="t1"><a href="#">1</a></div>
<div id="t2"><a href="#">2</a></div>
<div id="t3"><a href="#">3</a></div>
<div id="t4"><a href="#">4</a></div>
</body>
</html>
<html>
<style type="text/css">
<!--
#t1,#t2,#t3,#t4
height:30px;
width:50px;
background-color:#33FFFF;
float:left;
margin-left:50px;
text-align:center;
-->
</style>
<body>
<div id="t1"><a href="#">1</a></div>
<div id="t2"><a href="#">2</a></div>
<div id="t3"><a href="#">3</a></div>
<div id="t4"><a href="#">4</a></div>
<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript">
$(function()
$("div[id^='t']").click(function()
$("div[id^='t']").css("background","#33ffff");
$(this).css("background","#ff0000")
return false
)
)
</script>
</body>
</html>追问
对不起……没有效果诶……
追答你引入jquery了没
追问这个……jquery里面写什么呢？
追答jquery是个js框架 到网上搜索一下 引入就对了
参考技术A 修改了一下，你完全可以写得简洁一些，有利于SEO推广和页面简洁以下代码我做了测试，这个绝对OK
<html>
<script src="/script/Jquery/jquery-1.3.2.js"></script>
<script language="javascript">
$(function()
$("#menu a").click(function()
$("#menu a").css("background","#33FFFF");//还原所有A的北景
$(this).css("background","#f00"); //这里是点击后的A北景
)
)
</script>
<style type="text/css">
<!--
#menu a
height:30px;
width:50px;
background-color:#33FFFF;
float:left;
margin-left:50px;
text-align:center;
-->
</style>
<body>
<div id="menu">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
</div>
</body>
</html>追问
我在firefox和360浏览器上测试……无效诶……整段代码复制的，是不是以为我没有这个文件啊……
追答
上面肯定要引用你的jquery地址了，那个是我自己环境里面的jquery，你要改成你的jquery文件地址，肯定是有效的jquery的兼容性很好
这个……我的意思是jquery-1.3.2.js里面写什么呢？
追答jqury里面你根本不需要写什么只要src进页面就好，你以前没用过jquery？
参考技术B $(function()$('div[id*="t"]').click(function()
var $this = $(this);
$this.css("background-color","red");
$this.siblings('div[id*="t"]').css("background-color","#33FFFF");
);
); 参考技术C 貌似以上写法在firefox中无效，
请问用js或jquery怎样实现像QQ菜单一样的效果?
参考技术A 有个jquery的插件,手风琴的,LZ可以找找,官网插件里面好像就有以上是关于请问怎么用jquery实现以下效果的主要内容，如果未能解决你的问题，请参考以下文章