大家帮我看看jquery怎么没效果？

majic2008 2010-11-11 10:13:44 


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JqueryDemo1.aspx.cs" Inherits="JqueryDemo1" %>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>1-3</title>

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<script type="text/javascript">

    $(".has_children").click(function(){

	$(this).addClass("highlight")			//为当前元素增加highlight类

		.children("li").show().end()			//将子节点的li元素显示出来并重新定位到上次操作的元素

	.siblings().removeClass("highlight")		//获取元素的兄弟元素，并去掉他们的highlight类

		.children("li").hide();				//将兄弟元素下的li元素隐藏

});



</script>

<style type="text/css">

#menu { 

	width:300px; 

}

 .has_children{

	background : #555;

	color :#fff;

	cursor:pointer;

 }

 .highlight{

	color : #fff;

	background : green;

 }

 ul{

	list-style:none;

	padding:0;

 }

 ul li{

	background : #888;

	display : none;

 }

 </style>

</head>

<body>

<div id="menu">

	<ul class="has_children">第1章-认识一下jQuery 

		<li>1.1-jQuery简介</li>

		<li>1.2-加入jQuery</li>

		<li>1.3-编写jQuery代码</li>

		<li>1.4-jQuery对象和DOM对象</li>

		<li>1.5-解决jQuery和其它库的冲突</li>

		<li>1.6-小结</li>

	</ul>

	<ul class="has_children">第2章-jQuery之选择器

		<li>2.1-什么是选择器</li>

		<li>2.2-jQuery选择器的优势</li>

		<li>2.3-jQuery选择器</li>

		<li>2.4-选择器中带特殊符号的处理</li>

		<li>2.5-javascript中的一些对比操作势</li>

		<li>2.6-做一个图片展示效果</li>

		<li>2.7-小结</li>

	</ul>

	<ul class="has_children">第3章-jQuery之DOM操作

		<li>3.1-介绍DOM操作的重要性</li>

		<li>3.2-jQuery的DOM操作</li>

		<li>3.3-打造一个图片馆</li>

		<li>3.4-小结</li>

	</ul>

</div>

</body>

</html>
...全文
290 11 打赏 收藏 转发到动态 举报
写回复
用AI写文章
11 条回复
切换为时间正序
请发表友善的回复…
发表回复
zhuxueliao 2010-11-11
  • 打赏
  • 举报
 回复
你是不是一直都报页面错误？？？看看你前面<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>这引用的路径对吗？

wdzr_826 2010-11-11
  • 打赏
  • 举报
 回复 
 $(".has_children").click(function(){

    $(this).addClass("highlight")            //为当前元素增加highlight类

        .children("li").show().end()            //将子节点的li元素显示出来并重新定位到上次操作的元素

    .siblings().removeClass("highlight")        //获取元素的兄弟元素，并去掉他们的highlight类

        .children("li").hide();                //将兄弟元素下的li元素隐藏

});


改为
$(document).ready(function(){

    $(".has_children").click(function(){

    $(this).addClass("highlight")            //为当前元素增加highlight类

        .children("li").show().end()            //将子节点的li元素显示出来并重新定位到上次操作的元素

    .siblings().removeClass("highlight")        //获取元素的兄弟元素，并去掉他们的highlight类

        .children("li").hide();                //将兄弟元素下的li元素隐藏

});



})
蝶恋花雨 2010-11-11
  • 打赏
  • 举报
 回复
你没初始化。也就是$(document).ready 没有 。
蝶恋花雨 2010-11-11
  • 打赏
  • 举报
 回复
改成这个JS就好了
<script type="text/javascript">
$(document).ready(function () {
$(".has_children").click(function () {
$(this).addClass("highlight") //为当前元素增加highlight类
.children("li").show().end() //将子节点的li元素显示出来并重新定位到上次操作的元素
.siblings().removeClass("highlight") //获取元素的兄弟元素，并去掉他们的highlight类
.children("li").hide(); //将兄弟元素下的li元素隐藏
});
});
</script>
Teng_s2000 2010-11-11
  • 打赏
  • 举报
 回复
JQuery 的ready呢
kingboyrang 2010-11-11
  • 打赏
  • 举报
 回复
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>1-3</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

<style type="text/css">
#menu {
width:300px;
}
.has_children{
background : #555;
color :#fff;
cursor:pointer;
}
.highlight{
color : #fff;
background : green;
}
ul{
list-style:none;
padding:0;
}
ul li{
background : #888;
display : none;
}
</style>
</head>
<body>
<div id="menu">
<ul class="has_children">第1章-认识一下jQuery
<li>1.1-jQuery简介</li>
<li>1.2-加入jQuery</li>
<li>1.3-编写jQuery代码</li>
<li>1.4-jQuery对象和DOM对象</li>
<li>1.5-解决jQuery和其它库的冲突</li>
<li>1.6-小结</li>
</ul>
<ul class="has_children">第2章-jQuery之选择器
<li>2.1-什么是选择器</li>
<li>2.2-jQuery选择器的优势</li>
<li>2.3-jQuery选择器</li>
<li>2.4-选择器中带特殊符号的处理</li>
<li>2.5-javascript中的一些对比操作势</li>
<li>2.6-做一个图片展示效果</li>
<li>2.7-小结</li>
</ul>
<ul class="has_children">第3章-jQuery之DOM操作
<li>3.1-介绍DOM操作的重要性</li>
<li>3.2-jQuery的DOM操作</li>
<li>3.3-打造一个图片馆</li>
<li>3.4-小结</li>
</ul>
</div>
<script type="text/javascript">
$(".has_children").click(function(){
$(this).addClass("highlight") //为当前元素增加highlight类
.children("li").show().end() //将子节点的li元素显示出来并重新定位到上次操作的元素
.siblings().removeClass("highlight") //获取元素的兄弟元素，并去掉他们的highlight类
.children("li").hide(); //将兄弟元素下的li元素隐藏
});

</script>说明:script放这里
</body>
</html>
kingboyrang 2010-11-11
  • 打赏
  • 举报
 回复
<script type="text/javascript">
$(".has_children").click(function(){
$(this).addClass("highlight") //为当前元素增加highlight类
.children("li").show().end() //将子节点的li元素显示出来并重新定位到上次操作的元素
.siblings().removeClass("highlight") //获取元素的兄弟元素，并去掉他们的highlight类
.children("li").hide(); //将兄弟元素下的li元素隐藏
});

</script>
这段脚本放到body的最后面，因为ul都还没有加载出来就进行绑定，会执行不到,我经测式没有问题
majic2008 2010-11-11
  • 打赏
  • 举报
 回复
这段代码的作用是，当鼠标点击到class中含有.has_children的元素上的时候，给其添加一个名为highlight的class，然后将其内部li子元素都显示出来，并且被点击的.has_children元素的同辈元素都去掉一个名为highlight的class，以及内部的li子元素统统隐藏。
majic2008 2010-11-11
  • 打赏
  • 举报
 回复
[Quote=引用 2 楼 zhuxueliao 的回复:]
请问这是你考的别人的吗？还是你自己写的？
[/Quote]
锋利的jquery里的例子，但是我拿过来写了没效果
zhuxueliao 2010-11-11
  • 打赏
  • 举报
 回复
请问这是你考的别人的吗？还是你自己写的？
majic2008 2010-11-11
  • 打赏
  • 举报
 回复
没人帮忙试试吗？嫌分少
jquery button click没效果
本文提供了一套详细的排查流程和操作步骤，帮助开发者解决jQuery按钮点击功能失效的问题，包括确认jQuery加载、检查选择器和事件绑定等关键环节。
「jQuery系列」jQuery 效果详解
本文详细介绍了jQuery中的各种动画效果、元素显示与隐藏、动画队列管理、回调函数应用、延迟动画以及链式调用的使用方法和注意事项，帮助开发者更好地掌握jQuery动画控制技巧。
jQuery库之jQuery效果
本文详细介绍了 jQuery 的多种效果及链操作。包括使用 hide()、show()、toggle() 实现隐藏和显示效果；fadeIn()、fadeOut() 等实现淡入淡出效果；slideDown()、slideUp() 等实现滑动效果；animate() 创建自定义动画，还有 stop() 停止动画。此外，还讲解了 jQuery 链，可在一条语句运行多个方法。
jQuery UI添加效果
本文通过一个具体的示例展示了如何使用jQuery来为网页元素添加动画效果。具体包括：定义HTML结构，利用CSS设置样式，以及使用jQuery脚本来实现动画效果。点击按钮后，指定的元素会逐渐变化样式。
jQuery 动画效果
本文详细介绍了jQuery中常用的动画效果，包括show/hide、slide、fadeIn/fadeOut，以及如何使用animate进行自定义动画，并展示了滑动效果的实例和stop()方法的使用。关键词：jQuery动画、show hide、slideToggle、animate、自定义效果
.NET社区

62,271

社区成员

668,979

社区内容

发帖
与我相关
我的任务
社区描述
.NET技术交流专区
javascript云原生 企业社区
社区管理员
  • ASP.NET
  • .Net开发者社区
  • R小R
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告

.NET 社区是一个围绕开源 .NET 的开放、热情、创新、包容的技术社区。社区致力于为广大 .NET 爱好者提供一个良好的知识共享、协同互助的 .NET 技术交流环境。我们尊重不同意见，支持健康理性的辩论和互动，反对歧视和攻击。

希望和大家一起共同营造一个活跃、友好的社区氛围。

试试用AI创作助手写篇文章吧

+ 用AI写文章