点击首页的时候，图标跟字怎么变色，背景色不变。点击订单或会员中心的时候，其它还原。求前端大神解答。





 我来答

4个回答

#合辑# 面试问优缺点怎么回答最加分？

百度网友471b2db
2016-10-26 · TA获得超过169个赞

知道小有建树答主

回答量：169

采纳率：50%

帮助的人：36万

我也去答题访问个人页

关注

展开全部

我根据你的情况是这么做的，点击首页的时候，首页的字体颜色改变，订单和会员中心的字体颜色还原；
点击订单的时候，订单的字体颜色改变，首页和会员中心中心的字体颜色还原；
点击会员中心的时候，会员中心的字体颜色改变，首页和订单的字体颜色还原；
因为你没有给首页、订单和会员中心的图片，所以我也没有去切图什么的，只做好了字体颜色的改变，你稍后看懂了直接将图片背景的颜色添加上去即可，下面就是我的样式和内容：
<style>
ul li{list-style: none;width:200px;height:40px;line-height: 40px;text-align: center; }
a{text-decoration:none;color:#fff;font-size: 20px;}
.aa{background:#777;}
.bb{background: #888}
.cc{background: #999}
.aa1:focus{color:#000;}
.aa1:focus .bb1{color:#fff;}
.aa1:focus .cc1{color:#fff;}

.bb1:focus{color:#000;}
.bb1:focus .aa1{color:#fff;}
.bb1:focus .cc1{color:#fff;}

.cc1:focus{color:#000;}
.cc1:focus .aa1{color:#fff;}
.cc1:focus .bb1{color:#fff;}
</style>
<body>

<div class="foot">
<ul>
<li class="aa">
<a href="#" class="aa1">
<div class="pic"><img src="" alt=""></div>
<div class="tit">首页</div>
</a>
</li>

<li class="bb">
<a href="#" class="bb1">
<div class="pic"><img src="" alt=""></div>
<div class="tit">订单</div>
</a>
</li>

<li class="cc">
<a href="#" class="cc1">
<div class="pic"><img src="" alt=""></div>
<div class="tit">会员中心</div>
</a>
</li>
</ul>
</div>
</body>

已赞过 已踩过<

评论收起

匿名用户
2016-10-26

展开全部

<style type="text/css">
pic{}
tit{}
tit1{color:red;}//存放你要修改的字体的颜色及其他tit中的属性
</style>
<ul>
<li>
<a href="#" onclick="addClass(1)">
<div class="pic"><img id="img1" src="ok.png" /></div>
<div id="tit1" class="tit">首页</div>
</a>
</li>
<li>
<a href="#" onclick="addClass(2)">
<div class="pic"><img id="img2" src="ok.png" /></div>
<div id="tit2" class="tit">>订单</div>
</a>
</li>
<li>
<a href="#" onclick="addClass(3)">
<div class="pic"><img id="img3" src="ok.png" /></div>
<div id="tit3" class="tit">>会员中心</div>
</a>
</li>
</ul>
<script>
function addClass(str){
switch(str){
case 1: 
document.getElementById("tit1").className="tit1"; 
document.getElementById("tit2").className="tit";
document.getElementById("tit3").className="tit";
document.getElementById("img1").src="./images/1_1.png";//换为有颜色的图片路径 
document.getElementById("img2").src="./images/2.png"; 
document.getElementById("img3").src="./images/3.png"; 
break;
case 2:
document.getElementById("tit1").className="tit";
document.getElementById("tit2").className="tit1";
document.getElementById("tit3").className="tit";
document.getElementById("img1").src="./images/1.png"; 
document.getElementById("img1").src="./images/2_2.png"; 
document.getElementById("img1").src="./images/3.png"; 
break;
default:
document.getElementById("tit1").className="tit";
document.getElementById("tit2").className="tit";
document.getElementById("tit3").className="tit1";
document.getElementById("img1").src="./images/1.png"; 
document.getElementById("img1").src="./images/2.png"; 
document.getElementById("img1").src="./images/3_3.png"; 
break;
} 
}
</script>

追问

大神。图片是可以了，文字怎么跟着变色。

本回答被提问者和网友采纳

已赞过 已踩过<

评论收起

大偶鱼04
2016-10-26 · 超过14用户采纳过TA的回答

知道答主

回答量：82

采纳率：0%

帮助的人：17.3万

我也去答题访问个人页

关注

展开全部

是点击还是经过呢？
加onMouseOver属性和onMouseOut属性，给你个例子:
<head>
<STYLE type="text/css">
a{text-decoration:none;}去除超链接下划线
.onMouseOver{color:#ff0000;}让字体变为红色
.onMouseOut{color:#000000;}让字体变为黑色
</STYLE>
</head>
下面是要在<A>标记里面添加鼠标移入(onMouseOver)和移出(onMouseOut)事件
<a href="#" onMouseOver="className='onMouseOver='" onMouseOut="className='onMouseOut'">
这是一个让超链接变色的例子

二：这是我以前学的，不知道对你有帮助没，嘿嘿
代码如下:
css文件:
navigate.css

CSS code?
body {
font-size:12px;
font-family: Arial, Helvetica, sans-serif;
}

.big-bold {
font-size:14px;
font-weight:bold;
color:#000;
}

.normal {
font-size:12px;
font-weight:normal;
color:#666;
}

html代码如下:
naviage.html

XML/HTML code?
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<link type="text/css" rel="stylesheet" href="css/navigate.css" />
<script type="text/javascript" src="javascript/navigate.js"></script>
</head>
<body>
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">联系我们</a>
</li>
<li>
<a href="#">帮助</a>
</li>
</ul>
</body>
</html>

javascri代码:
navigate.js

JavaScript code?

/**
* @author lvjian
*/
window.onload = initLinkStyle;

function initLinkStyle() {
if(document.getElementsByTagName('a')){
var arrLink = document.getElementsByTagName('a');
for(i = 0; i < arrLink.length; i++) {
var link = arrLink[i];
link.className='normal';
link.onclick = clickNav;
}
}
}

/**
* 执行点击事件
* @param {Object} event 鼠标事件
*/
function clickNav(event) {
var target = event.currentTarget;

//擦出上次选择的a的样式
if(document.getElementsByTagName('a')){
var arrLink = document.getElementsByTagName('a');
for(i = 0; i < arrLink.length; i++) {
var link = arrLink[i];
if(link.className == 'big-bold') {
link.className = 'normal';
}
}
}

target.className = 'big-bold';

return false;//阻止浏览器默认事件
}

已赞过 已踩过<

评论收起

百度网友9cdda87
2016-10-26 · TA获得超过508个赞

知道小有建树答主

回答量：1108

采纳率：36%

帮助的人：353万

我也去答题访问个人页

关注

展开全部

选中状态？？

已赞过 已踩过<

评论收起

更多回答（2）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

点击首页的时候，图标跟字怎么变色，背景色不变。点击订单或会员中心的时候，其它还原。求前端大神解答。

其他类似问题

为你推荐：