首页  »   JavaScript

求大神写一个鼠标点击领航背景停留的效果

网友分享于:2014-04-19  浏览:24次
求大神写一个鼠标点击导航背景停留的效果


如果点击11  有个背景停留。  如果点击22  字体颜色变为蓝色  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>无标题文档</title>
<style>
.cplb_nr h3.active{background:#ccc;color:#fff;}
.cplb_nrsub li.active{background:yellow;color:#000;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script>
$(function(){
$('.cplb_nr h3').click(function(){
$('.cplb_nr h3').removeClass('active');
$(this).addClass('active');
$('.cplb_nrsub li').removeClass('active');
});
$('.cplb_nrsub li').click(function(){
$('.cplb_nr h3').removeClass('active');
$('.cplb_nrsub li').removeClass('active');
$(this).parent().prev().addClass('active');
$(this).parent().find('li').removeClass('active');
$(this).addClass('active');
});
})
</script>
</head>

<body>
<div class="pro_m_l fl">
            <div class="pro_m_l_t"><h3>产品</h3></div><br />
            <div id="mleft" class="pdleft">
            <div class="cplb">
            <ul class="cplb_nr">
                <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">111</a></h3>
                <ul class="cplb_nrsub"  key="17" >
                <li key="17"><a href="#">222</a></li>
                <li key="33"><a href="#">222</a></li>
                </ul>
                
                <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">111</a></h3>
                <ul class="cplb_nrsub"  key="17" >
                <li key="17"><a href="#">222</a></li>
                </ul>
                
                <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">111</a></h3>
                <ul class="cplb_nrsub"  key="17" >
                <li key="17"><a href="#">222</a></li>
                </ul>
                
                <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">111</a></h3>
                <ul class="cplb_nrsub"  key="17" >
                <li key="17"><a href="#">222</a></li>
                </ul>
                
                <h3 key="17"><a href="javascript:void(0)" class="cplb_nr1">111</a></h3>
                <ul class="cplb_nrsub"  key="17" >
                <li key="17"><a href="#">222</a></li>
                <li key="17"><a href="#">222</a></li>
上一页1/2下一页

相关解决方案

最新解决方案