鼠标点击调用一个样式

a2068879 2010-10-25 03:09:55
导航:
<li class="current"><a href="/default.jsp" title="首页"><span>首页</span></a></li>
<li><a href="/jsp/business/kssm.jsp" title="考试说明">考试说明</a></li>
<li><a href="/jsp/business/sqks.jsp" title="申请考试"><span>申请考试</span></a></li>
<li><a href="/jsp/business/mnks.jsp" title="模拟考试"><span>模拟考试</span></a></li>
<li ><a href="/jsp/business/rzks.jsp" title="认证考试">认证考试</a></li>
<li><a href="/jsp/business/cjcx.jsp" title="成绩查询"><span>成绩查询</span></a></li>



鼠标点击一个超链接 li给里面一个class="current" 样式 ,之前那个删除掉!
...全文
206 14 打赏 收藏 转发到动态 举报
写回复
用AI写文章
14 条回复
切换为时间正序
请发表友善的回复…
发表回复
Mr-Jee 2010-10-25
  • 打赏
  • 举报
回复


window.onload = function() {
var t = new RegExp(/(\w+?\.jsp)/);
var a = "/jsp/business/kssm.jsp"
var a = a.match(t)[0];
alert(a);
var lis = document.getElementsByTagName("li");
for(var i = 0; i < lis.length; i++) {
lis[i].className="";
if(lis[i].getElementsByTagName("a")[0].href.match(t)[0] == a) {
lis[i].className="current";
}
}
}
</scrip

zhangshaolongjj 2010-10-25
  • 打赏
  • 举报
回复
你这个是不是好几个画面都有这几个li阿?那你点击后的li就不是这个了
a2068879 2010-10-25
  • 打赏
  • 举报
回复
hch126163
你是对的 谢谢各位 有可能是我没说明白 非常感谢
a2068879 2010-10-25
  • 打赏
  • 举报
回复
[Quote=引用 7 楼 zhangshaolongjj 的回复:]
<li ><a href="/default.jsp" title="首页"><span>首页</span></a></li>
<li><a href="/jsp/business/kssm.jsp" title="考试说明" onclick="this.parentNode.className='current';">考试说明</a></li>
<li><a href="/jsp/busin……
[/Quote]

复制过去了 没有任何效果 跟原来一样
hch126163 2010-10-25
  • 打赏
  • 举报
回复
你这个不是点击的时候换样式,是在页面加载时,判断url,设置样式!

<div id="div_menu">
<li><a href="/default.jsp" title="首页"><span>首页</span></a></li>
<li><a href="/jsp/business/kssm.jsp" title="考试说明">考试说明</a></li>
<li><a href="/jsp/business/sqks.jsp" title="申请考试"><span>申请考试</span></a></li>
<li><a href="/jsp/business/mnks.jsp" title="模拟考试"><span>模拟考试</span></a></li>
<li ><a href="/jsp/business/rzks.jsp" title="认证考试">认证考试</a></li>
<li><a href="/jsp/business/cjcx.jsp" title="成绩查询"><span>成绩查询</span></a></li>
</div>
<script>
(function(){
var div_menu = document.getElementById("div_menu");
var aList = div_menu.getElementsByTagName("a");
var url = document.location.href;
var hrefUrl = '';
var index=0;
if(aList ==null || typeof(aList )=='undefined')
{ return;}

for(;index < aList.length;index++)
{
hrefUrl = aList[index].href;
hrefUrl = hrefUrl.substr(hrefUrl.lastIndexOf('/')+1);
if(hrefUrl!='' && hrefUrl != '/')
{
if(url.indexOf(hrefUrl) > 0 )
{
break;
}
}
}
if(index < aList.length)
{
aList[index].parentNode.className='current';
}
})();
</script>
zhangshaolongjj 2010-10-25
  • 打赏
  • 举报
回复
[Quote=引用 8 楼 a2068879 的回复:]

引用 3 楼 cj205 的回复:
JScript code

var lis = document.getElementsByTagName("li");
for(var i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
this.class == (this.class&amp;&am……
[/Quote]
class ==> className
a2068879 2010-10-25
  • 打赏
  • 举报
回复
[Quote=引用 3 楼 cj205 的回复:]
JScript code

var lis = document.getElementsByTagName("li");
for(var i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
this.class == (this.class&&this.class=="current")……
[/Quote]

this.class == (this.class&&this.class=="current")
这个地方出错!
zhangshaolongjj 2010-10-25
  • 打赏
  • 举报
回复
<li ><a href="/default.jsp" title="首页"><span>首页</span></a></li>
<li><a href="/jsp/business/kssm.jsp" title="考试说明" onclick="this.parentNode.className='current';">考试说明</a></li>
<li><a href="/jsp/business/sqks.jsp" title="申请考试" onclick="this.parentNode.className='current';"><span>申请考试</span></a></li>
<li><a href="/jsp/business/mnks.jsp" title="模拟考试" onclick="this.parentNode.className='current';"><span>模拟考试</span></a></li>
<li ><a href="/jsp/business/rzks.jsp" title="认证考试" onclick="this.parentNode.className='current';">认证考试</a></li>
<li><a href="/jsp/business/cjcx.jsp" title="成绩查询" onclick="this.parentNode.className='current';"><span>成绩查询</span></a></li>
复制过去看看
a2068879 2010-10-25
  • 打赏
  • 举报
回复
[Quote=引用 2 楼 zhangshaolongjj 的回复:]
感觉你这个没作用阿,你点击后就跳转了,我上面写的return false去掉!
[/Quote]

return false去掉!
之后没有任何反应了

我这个类似导航其他页面都是引用的这个页面 所以跳转到别的页面的时候 也要他调用这个样式
zhangshaolongjj 2010-10-25
  • 打赏
  • 举报
回复
return false去掉!
a2068879 2010-10-25
  • 打赏
  • 举报
回复
谢谢 可是超链接不好使了!!
<li ><a href="/default.jsp" title="首页"><span>首页</span></a></li>
<li><a href="/jsp/business/kssm.jsp" title="考试说明" onclick="this.parentNode.className='current';return false;">考试说明</a></li>
<li><a href="/jsp/business/sqks.jsp" title="申请考试" onclick="this.parentNode.className='current';return false;"><span>申请考试</span></a></li>
<li><a href="/jsp/business/mnks.jsp" title="模拟考试" onclick="this.parentNode.className='current';return false;"><span>模拟考试</span></a></li>
<li ><a href="/jsp/business/rzks.jsp" title="认证考试" onclick="this.parentNode.className='current';return false;">认证考试</a></li>
<li><a href="/jsp/business/cjcx.jsp" title="成绩查询" onclick="this.parentNode.className='current';return false;"><span>成绩查询</span></a></li>
Mr-Jee 2010-10-25
  • 打赏
  • 举报
回复

var lis = document.getElementsByTagName("li");
for(var i = 0; i < lis.length; i++) {
lis[i].onclick = function() {
this.class == (this.class&&this.class=="current") ? "" : "current";
};
}

//possible楼主的代码中有个问题,那就是会打开新的页面,而这个时候就不能保存样式了 对嘛
zhangshaolongjj 2010-10-25
  • 打赏
  • 举报
回复
感觉你这个没作用阿,你点击后就跳转了,我上面写的return false去掉!
zhangshaolongjj 2010-10-25
  • 打赏
  • 举报
回复
<li><a href="/default.jsp" title="首页" onclick="this.parentNode.className='current';return false;"><span>首页</span></a></li>

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

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