jquery问题
0
悬赏园豆：10
[已解决问题]
解决于 2015-06-25 16:54
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>导航条在项目中的应用</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <link rel="stylesheet" type="text/css" href="CSS/2.css"> <script type="text/javascript" src="jquery/jquery-1.11.3.js" ></script> <script type="text/javascript"> //页面加载事件 $(function(){ //图片点击事件 $(".clsHead").click(function(){ if($(".clsContent").is(":visible")){ //如果内容可见 $(".clsHead span img").attr("src","Images/1.jpg"); //改变图片 //隐藏内容 $(".clsContent").css("display","none"); }else{ $(".clsHead span img").attr("src","Images/2.jpg"); //改变图片 //显示内容 $(".clsContent").css("display","block"); } })； //热点链接单击事件 $(".clsBot > a").click(function(){ //如果内容为“简化”字样 if($(".clsBot > a").text() == "简化"){ //隐藏index号大于4且不是最后一项的元素 $("ul li:gt(4):not(:last)").hide(); //将字符内容更改为“更多” $(".clsBot > a").text("更多"); }else{ //显示所以元素且增加样式 $("ul li:gt(4):not(:last)").show().addClass("GetFoucs"); //将字符内容更改为“简化” $(".clsBot > a").text("简化"); } }); }); </script> </head> <body> <div id="divFarme"> <div class="clsHead"> <h3>图书分类</h3> <span><img src="Images/2.jpg" /></span> </div> <div class="clsContent"> <ul> <li><a href="#">小说</a><i>(152)</i></li> <li><a href="#">文艺</a><i>(540)</i></li> <li><a href="#">少儿</a><i>(1111)</i></li> <li><a href="#">青春</a><i>(640)</i></li> <li><a href="#">生活</a><i>(1540)</i></li> <li><a href="#">社会</a><i>(3051)</i></li> <li><a href="#">管理</a><i>(243)</i></li> <li><a href="#">金融</a><i>(1620)</i></li> <li><a href="#">教育</a><i>(1444)</i></li> <li><a href="#">计算机</a><i>(3540)</i></li> <li><a href="#">工具书</a><i>(2451)</i></li> <li><a href="#">引进版</a><i>(655)</i></li> <li><a href="#">其他类</a><i>(4680)</i></li> </ul> <div class="clsBot"> <a href="#">简化</a> <img src="Images/3.jpg" /> </div> </div> </div> </body> </html>
CSS代码
body{font-size:13px}
#divFarme{border:solid 1px #666; width:301; overflow:hidden}
#divFarme .clsHead{backgroung-color:#eee; padding:8px; height:18px; cursor:hand;}
#divFarme .clsHead h3{padding:0px; margin:0px; float:left}
#divFarme .clsHead span{float:right; margin-top:3px}
#divFarme .clsContent{padding:8px}
#divFarme .clsContent ul{list-style-type:none; margin:0px; padding:0px;}
#divFarme .clsContent ul li{float:left; width:95px; height:23px; line-height:23px;}
#divFarme .clsBot{float:right; padding-top:5px; padding-bottom:5px;}
.GetFocus{background-color:#eee}
按照例子做的，但是效果没出来。
需求：1.在页面中创建一个导航条，单击标题时，可以伸缩导航条的内容，同时，标题中的提示图片也随之改变。
2.点击“简化”链接时，隐藏指定的内容，并将“简化” 字样改变成“更多”，单击更多链接时，返回初始状态，并改变指定显示元素的背景色。
找不到问题在哪，求帮助
最佳答案
0
js代码不用放在页面页面，因为调用了jquery封装的$(function(){}),这个实在DOM加载完毕之后才会执行的,另外你的这套代码我单抽出来放在一个HTML页面中是没有问题的，CSS有一点问题，width：301应该改为width：301px；#divFarme .clsHead{backgroung-color:#eee;中background拼写错误，cursor:hand应该为cursor：pointer。建议将页面debug中的错误信息粘出来。
收获园豆：10
顺便说上一句，你很可能是<base href="<%=basePath%>">使用的不当，导致jquery类库文件都没有引进去，可以检查一下这块。
其他回答(1)
0
首先把js代码放在页面下面看看。然后你的需求1：单击标题应该是$(".clsHead h3").click
还是没效果。。。
