首页 新闻 搜索 专区 学院

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.点击“简化”链接时,隐藏指定的内容,并将“简化” 字样改变成“更多”,单击更多链接时,返回初始状态,并改变指定显示元素的背景色。

 

找不到问题在哪,求帮助

谁说不可以重名的主页 谁说不可以重名 | 初学一级 | 园豆:15
提问于:2015-06-18 10:18
< >
分享
最佳答案
0

js代码不用放在页面页面,因为调用了jquery封装的$(function(){}),这个实在DOM加载完毕之后才会执行的,另外你的这套代码我单抽出来放在一个HTML页面中是没有问题的,CSS有一点问题,width:301应该改为width:301px;#divFarme .clsHead{backgroung-color:#eee;中background拼写错误,cursor:hand应该为cursor:pointer。建议将页面debug中的错误信息粘出来。

收获园豆:10
芝芝07 | 菜鸟二级 |园豆:365 | 2015-06-18 14:05

顺便说上一句,你很可能是<base href="<%=basePath%>">使用的不当,导致jquery类库文件都没有引进去,可以检查一下这块。

芝芝07 | 园豆:365 (菜鸟二级) | 2015-06-18 14:08
其他回答(1)
0

首先把js代码放在页面下面看看。然后你的需求1:单击标题应该是$(".clsHead h3").click

豆瓣绿 | 园豆:237 (菜鸟二级) | 2015-06-18 11:08

还是没效果。。。

支持(0) 反对(0) 谁说不可以重名 | 园豆:15 (初学一级) | 2015-06-18 11:12
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册