找回密码
 注册

QQ登录

只需一步,快速开始

查看: 2988|回复: 12

[jquery] 急求导航效果修改问题!

[复制链接]
发表于 2014-1-24 01:06:03 | 显示全部楼层 |阅读模式
30体力
HTML代码:
<div class="rtList  list_about_b">
                              <ul>
                            <li class="bg2 a3"><a href="work2.asp?id=107">米罗小小班</a></li>
                                                <li class="a4"><a href="work2.asp?id=106">早稻工作室</a></li>
                        <li class="a5"><a href="work2.asp?id=105">毕加索大师班</a></li>
                                                <li class="a6"><a href="work2.asp?id=104">小时装设计部</a></li>
                        <li class="a7"><a href="work2.asp?id=103">动漫创作班         </a></li>
                        <li class="a8"><a href="work2.asp?id=98">美术基础班</a></li>
                                                <li class="a9"><a href="work2.asp?id=97">墨趣轩 ? 书法班</a></li>
                        <li class="a10"><a href="work2.asp?id=96">DIY ? 手工坊</a></li>
                        
                        
                        
                    </ul>
</div>
默认是“米罗小小班”所在的娿, 文字为黄色。当点击其他栏目跳转到其他页面的时候,点击后的文字也变为黄色,并且于页面对应。自己用过这种方便没有效果(应该是点击后跳转到其他页面,页面刷新了,点击的效果不起作用吧)
$("list_about_b ul li).click(function(){
                $(this).addClass("bg2").siblings().removeClass("bg2");
               
})  
  求大神们帮帮忙啊,感激不尽!!!      
123.jpg

最佳答案

查看完整内容

遍历,如果href的值和网页的值相同,给他加个样式就行了
发表于 2014-1-24 01:06:04 | 显示全部楼层
遍历,如果href的值和网页的值相同,给他加个样式就行了
回复

使用道具 举报

发表于 2014-1-24 10:45:51 | 显示全部楼层
其实我也一直想问这个问题,太初级一直没好开口。

我用的办法比较死,直接做对应菜单的多个页面………每个点到就跳到菜单变色的页面。
回复

使用道具 举报

发表于 2014-1-24 10:59:14 | 显示全部楼层
楼主你这是动态页asp,有传递id到下一个页面的,所以建议你直接提取id,但这不是最佳方法,最好是用内联框架菜单栏居于左侧,显示栏居于右侧,头部放网站的头部,这是asp最常用的网站布局,当你点击菜单栏切换时并没有重新加载整个页面,只是切换显示页的url而已,自然不用担心你的click事件不生效了~~~
回复

使用道具 举报

 楼主| 发表于 2014-1-24 13:22:10 | 显示全部楼层
jw630 发表于 2014-1-24 09:41
遍历,如果href的值和网页的值相同,给他加个样式就行了

这种方法是可以,顶部的导航是用这种方法,但是右侧导航再用这种方法就出现了问题,貌似跟顶部导航冲突,也可能是自己写的不对
网址:www . ningmengse.net/class.asp
回复

使用道具 举报

 楼主| 发表于 2014-1-24 13:24:49 | 显示全部楼层
ehiuan 发表于 2014-1-24 10:45
其实我也一直想问这个问题,太初级一直没好开口。

我用的办法比较死,直接做对应菜单的多个页面………每 ...

这样栏目太多的话就很麻烦啊,不便于修改管理
回复

使用道具 举报

发表于 2014-1-24 14:39:59 | 显示全部楼层
zhm8932 发表于 2014-1-24 13:22
这种方法是可以,顶部的导航是用这种方法,但是右侧导航再用这种方法就出现了问题,貌似跟顶部导航冲突, ...

你顶部的代码贴出来看看,学习下。
回复

使用道具 举报

发表于 2014-1-24 14:59:16 | 显示全部楼层
zhm8932 发表于 2014-1-24 13:22
这种方法是可以,顶部的导航是用这种方法,但是右侧导航再用这种方法就出现了问题,貌似跟顶部导航冲突, ...

应该是你写得不对
回复

使用道具 举报

 楼主| 发表于 2014-1-24 15:30:07 | 显示全部楼层
ehiuan 发表于 2014-1-24 14:39
你顶部的代码贴出来看看,学习下。

顶部代码及效果
HTML:

<nav>
        <ul>
                <li><a href="/index2.asp" class="bg n1">首页</a></li>
                <li><a href="aboutus.asp" class="bg n2">关于我们</a></li>
                <li><a href="class.asp" class="bg n3">班级介绍</a></li>
                <li><a href="work.asp" class="bg n4">学生作品</a></li>
                <li><a href="news.asp" class="bg n5">新闻活动</a></li>
                <li><a href="contactus.asp" class="bg n6">联系我们</a></li>
              </ul>
   </nav>
JS:
$(function() {
var a1 = document.URL;
var a2 = $("nav a");
for (var i = 0; i < a2.length; i++) {
                        if (a1.indexOf($(a2[i]).attr("href")) != -1) {
                        $(a2[i]).parent().addClass("current");
                        return;
                        }
        }
$(a2[0]).parent().addClass("current");
})
111.jpg
回复

使用道具 举报

 楼主| 发表于 2014-1-24 15:32:54 | 显示全部楼层
jw630 发表于 2014-1-24 14:59
应该是你写得不对

那如果要多处导航使用这种方法该怎么写啊,求指教
网址 :www . ningmengse.net/class.asp
回复

使用道具 举报

发表于 2014-1-24 16:22:33 | 显示全部楼层
zhm8932 发表于 2014-1-24 15:32
那如果要多处导航使用这种方法该怎么写啊,求指教
网址 :www . ningmengse.net/class.asp

上面和下面的不冲突啊,因为一个页面只有一个链接,要是你想班级介绍和下面其中一个的链接都有样式的话就在后面加如果链接等于小班的链接或者大班的链接等等的时候,给班级介绍加一个样式。
回复

使用道具 举报

发表于 2014-1-24 22:19:48 | 显示全部楼层
不知道我这样写行不行,如果你觉得可能可以,就试试咯,刚写的,没测试。没asp环境
                                        <%
                    url = Request.ServerVariables("SCRIPT_NAME")
                    urlParts = Split(url,"/")
                    pageName = urlParts(UBound(urlParts))
                                                           
                    if "u1.asp"= cstr(pageName) then
                        nav1="current1"
                    else
                        nav1="normal"
                    end if
                                       
                                       
                 if "u2.asp"= cstr(pageName) then
                        nav2="current2"
                    else
                        nav2="normal"
                    end if
                                       
                                       
                 if "u3.asp"= cstr(pageName) then
                        nav3="current3"
                    else
                        nav3="normal"
                    end if
                                       
                                       
                    %>

<div>
<ul>
<li class="<%=nav1%>"><a href="u1.ap">米罗小小班</a></li>
<li class="<%=nav2%>"><a href="u2.asp">早稻工作室</a></li>
<li class="<%=nav3%>"><a href="u2.asp">毕加索大师班</a></li>

</ul>
</div>
回复

使用道具 举报

发表于 2014-1-24 22:30:57 | 显示全部楼层
看了楼主的网页的新闻页面,在新闻文章的页面有 上一页 下一页的导航,很好奇,能问一下是怎么做处理的吗,什么思路呢?
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

小黑屋|Archiver|手机版|blueidea.com ( 湘ICP备19000417号-2 )

GMT+8, 2021-11-29 11:37 , Processed in 0.069071 second(s), 9 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表