Home >Web Front-end >HTML Tutorial >Please tell me how to set up the frameset to maintain the style after clicking the connection_html/css_WEB-ITnose
Please tell me how to set up the frameset to maintain the style after clicking the connection_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:14:321194browse
如题，框架分左右，左边菜单点击后的连接颜色，如：红色，直到点击其他菜单连接才恢复原来的颜色，如：黑色
回复讨论(解决方案)
要写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;
}
页面：
How to do it? Is there a code?
Page
- Basic settings
- Column settings
- Column content | Add
- Leave a comment
- Contact information
- Friendly Links
jquery
$(document).ready(function(){
var me = this, current;
$(".MM ul li").each(function () {
$(this).click(function () {
$(current).removeClass(" current");
}); >
css
.current{color:Red;}
Change the #menu above to .MM
I changed it, but it didn’t work after trying it. .
$(function () {
var basic = $("#basic");
var myframe = $("#myframe");
var column = $("#column");
var columnContent = $("#columnContent");
var comment = $("#comment");
var contact = $("#contact");
var link = $("#link");
basic.click(function () {
myframe.attr("src", "http://www.baidu.com")
});
column.click(function () {
myframe.attr("src", "http://www.baidu.com")
});
columnContent.click(function () {
myframe.attr("src", "http://www.g.cn")
});
comment.click(function () {
myframe.attr("src", "http://www.baidu.com")
});
contact.click(function () {
myframe.attr("src", "http://www.baidu.com")
});
link.click(function () {
myframe.attr("src", "http://www.baidu.com")
});
var me = this, current;
$(".MM li").each(function () {
$(this).click(function () {
$(".MM li").removeClass("current");
if (current) {
$(current).removeClass("current");
}
$(this).addClass("current");
current = this;
});
});
})
a{cursor:pointer;}
.current a{ color:Red;}
| |