代码如下所示：
<!DOCTYPE html>
<html>
<head>
<title>使用js及css对按钮样式修改</title>
<style>
.content {
width: 100%;
height: auto;
}
.button { /* 按钮美化 */
width: 80px; /* 宽度 */
height: 37px; /* 高度 */
border-width: 0px; /* 边框宽度 */
border-radius: 4px; /* 边框半径 */
background: #1E90FF; /* 背景颜色 */
cursor: pointer; /* 鼠标移入按钮范围时出现手势 */
outline: none; /* 不显示轮廓线 */
font-family: Microsoft YaHei; /* 设置字体 */
color: white; /* 字体颜色 */
font-size: 16px; /* 字体大小 */
opacity: 0.5;
}
.one {
opacity: 1; /* 默认选中周一 */
}
.button:hover {
opacity: 1 !important; /* 提高hover的优先权 */
}
</style>
</head>
<body title="周计划">
<script type="text/javascript">
function day(day) {
selectButton(day)
document.getElementById('ifr_id').src = xxx.html + new Date().getTime() // 刷新嵌套的iframe周计划
}
/**
* 点击选中设置
* @param a
*/
function selectButton(day) {
var buttons = document.getElementsByClassName("button");
for (var i = 0; i < buttons.length; i++) {
buttons[i].style.opacity = 0.5
}
buttons[day - 1].style.opacity = 1
}
</script>
<div class="content">
<button class="button one" onclick="day('1')" id="one"> 星期一</button>
<button class="button" onclick="day('2')" id="tue"> 星期二</button>
<button class="button" onclick="day('3')" id="wed"> 星期三</button>
<button class="button" onclick="day('4')" id="thu"> 星期四</button>
<button class="button" onclick="day('5')" id="fri"> 星期五</button>
<button class="button" onclick="day('6')" id="sat"> 星期六</button>
<button class="button" onclick="day('7')" id="sun"> 星期日</button>
</div>
<div>
<iframe id="ifr_id" src="one.html" width="100%"
height="100%" frameborder="0"></iframe>
</div>
</body>
</html>
