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

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

WBOY
WBOYOriginal
2016-06-24 12:14:321197Durchsuche

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


回复讨论(解决方案)

要写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>
  
 

 
  

  

 

 

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn