请问如何设置框架集里点击连接后保持样式_html/css_WEB-ITnose

php中文网
发布: 2016-06-24 12:14:32
原创
1408人浏览过

如题,框架分左右,左边菜单点击后的连接颜色,如:红色,直到点击其他菜单连接才恢复原来的颜色,如:黑色


回复讨论(解决方案)

要写js 动态改变class 然后再给class写样式~

CSS:
.MM {
width: 182px;
margin: 0px;
padding: 0px;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
clip: rect(0px,0px,0px,0px);
}
.MM a:link {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 26px;
color: #333333;
background-image: url(images/menu_bg1.gif);
background-repeat: no-repeat;
height: 26px;
width: 182px;
display: block;
text-align: center;
margin: 0px;
padding: 0px;
overflow: hidden;
text-decoration: none;
}
.MM a:visited {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 26px;
color: #333333;
background-image: url(images/menu_bg1.gif);
background-repeat: no-repeat;
display: block;
text-align: center;
margin: 0px;
padding: 0px;
height: 26px;
width: 182px;
text-decoration: none;
}

.MM a:hover {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 26px;
font-weight: bold;
color: #006600;
background-image: url(images/menu_bg2.gif);
background-repeat: no-repeat;
text-align: center;
display: block;
margin: 0px;
padding: 0px;
height: 26px;
width: 182px;
text-decoration: none;
}

.MM a:active {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: 26px;
color: #333333;
background-image: url(images/menu_bg2.gif);
background-repeat: no-repeat;
height: 26px;
width: 182px;
display: block;
text-align: center;
margin: 0px;
padding: 0px;
overflow: hidden;
text-decoration: none;
}

页面:
  


      

怎么弄啊,有代码么?

页面
 



jquery

$(document).ready(function(){
var me = this, current;
            $(".MM ul li").each(function () {
                $(this).click(function () {
                    $("#menu1 ul li").removeClass("current");
                    if (current) {
                        $(current).removeClass("current");
                    }
                    $(this).addClass("current");
                    current = this;
                });
            });
});



css
.current{color:Red;}

把上面的#menu 换成.MM

改了,试了不行。。

nbsp;HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

 


   New Document 
  
  
  
  
  <script></script>
  <script> <br /> $(function () { <br /> var basic = $("#basic"); <br /> var myframe = $("#myframe"); <br /> var column = $("#column"); <br /> var columnContent = $("#columnContent"); <br /> var comment = $("#comment"); <br /> var contact = $("#contact"); <br /> var link = $("#link"); <br /> basic.click(function () { <br /> myframe.attr("src", "http://www.baidu.com") <br /> }); <br /> column.click(function () { <br /> myframe.attr("src", "http://www.baidu.com") <br /> }); <br /> columnContent.click(function () { <br /> myframe.attr("src", "http://www.g.cn") <br /> }); <br /> comment.click(function () { <br /> myframe.attr("src", "http://www.baidu.com") <br /> }); <br /> contact.click(function () { <br /> myframe.attr("src", "http://www.baidu.com") <br /> }); <br /> link.click(function () { <br /> myframe.attr("src", "http://www.baidu.com") <br /> }); <br /> <br /> <br /> var me = this, current; <br /> $(".MM li").each(function () { <br /> $(this).click(function () { <br /> $(".MM li").removeClass("current"); <br /> if (current) { <br /> $(current).removeClass("current"); <br /> } <br /> $(this).addClass("current"); <br /> current = this; <br /> }); <br /> }); <br /> }) <br /> <br /> <br /> </script>
  
 

 
  

  

 

 

HTML速学教程(入门课程)
HTML速学教程(入门课程)

HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号