如果把style="border: 1px solid red;background-image: url('/application/images/selected_bg.gif');background-repeat:no-repeat;background-position:left bottom;";放在html中,就成功,但是放在javascript的changeBg函数中就不成功??
代码比如(部分):
<head>
<script type="text/javascript">
var oldObj;
function changeBg(sapnid) {
if (sapnid != null){
oldObj=document.getElementById(sapnid);
oldObj.style="border: 1px solid red;background-image: url('/application/images/selected_bg.gif');background-repeat:no-repeat;background-position:left bottom;";
}
}</head>
<body>
<table><tr>
<td id="1" onClick="changeBg('1')">首页</td>
<td id="2" onClick="changeBg('2')">论坛</td>
<td id="3" onClick="changeBg('3')">下载</td>
<td id="4" onClick="changeBg('4')">读书</td>
<td id="5" onClick="changeBg('5')">新闻</td>
</tr>
</table>
代码比如(部分):
<head>
<script type="text/javascript">
var oldObj;
function changeBg(sapnid) {
if (sapnid != null){
oldObj=document.getElementById(sapnid);
oldObj.style="border: 1px solid red;background-image: url('/application/images/selected_bg.gif');background-repeat:no-repeat;background-position:left bottom;";
}
}</head>
<body>
<table><tr>
<td id="1" onClick="changeBg('1')">首页</td>
<td id="2" onClick="changeBg('2')">论坛</td>
<td id="3" onClick="changeBg('3')">下载</td>
<td id="4" onClick="changeBg('4')">读书</td>
<td id="5" onClick="changeBg('5')">新闻</td>
</tr>
</table>
<script type="text/javascript">
var oldObj;
function changeBg(sapnid) {
if (sapnid != null){
oldObj=document.getElementById(sapnid);
oldObj.style="border: 1px solid red;background-image: url('/application/images/selected_bg.gif');background-repeat:no-repeat;background-position:left bottom;";
}
} </head>
<body>
<table> <tr>
<td id="1" onClick="changeBg('1')">首页 </td>
<td id="2" onClick="changeBg('2')">论坛 </td>
<td id="3" onClick="changeBg('3')">下载 </td>
<td id="4" onClick="changeBg('4')">读书 </td>
<td id="5" onClick="changeBg('5')">新闻 </td>
</tr>
</table>
<script type="text/javascript">
var oldObj;
function changeBg(sapnid) {
if (sapnid != null){
oldObj=document.getElementById(sapnid);
oldObj.style="border: 1px solid red;background-image: url('/application/images/selected_bg.gif');background-repeat:no-repeat;background-position:left bottom;";
}
} </head>
<body>
<table> <tr>
<td id="1" onClick="changeBg('1')">首页 </td>
<td id="2" onClick="changeBg('2')">论坛 </td>
<td id="3" onClick="changeBg('3')">下载 </td>
<td id="4" onClick="changeBg('4')">读书 </td>
<td id="5" onClick="changeBg('5')">新闻 </td>
</tr>
</table>
function changeBg(sapnid) {
if (sapnid != null){
oldObj=document.getElementById(sapnid);
oldObj.style.className="xxx";
}
}
不好意思lz 我忘记了。
<head>
<style type="text/css">
.image {border: 1px solid red;background-image: url('/application/images/selected_bg.gif');background-repeat:no-repeat;background-position:left bottom;
}
</style>
<script type="text/javascript">
var oldObj;
function changeBg(sapnid) {
if (sapnid != null){
oldObj=document.getElementById(sapnid);
oldObj.className="image";
}
} </head>
<body>
<table> <tr>
<td id="1" onClick="changeBg('1')">首页 </td>
<td id="2" onClick="changeBg('2')">论坛 </td>
<td id="3" onClick="changeBg('3')">下载 </td>
<td id="4" onClick="changeBg('4')">读书 </td>
<td id="5" onClick="changeBg('5')">新闻 </td>
</tr>
</table>
问题是现在点击“论坛”,背景图片就出来了。但是点击“下载”背景色也出来,我想要的效果是,点击“下载”的时候,"论坛"的背景图片应该消失啊,我要的是导航拉的“我现在在某模块”的效果啊?
该如何改进呢?
<style type="text/css">
.image {border: 1px solid red;background-image: url('/application/images/selected_bg.gif');background-repeat:no-repeat;background-position:left bottom;
}
</style>
<script type="text/javascript">
var oldObj;
function changeBg(sapnid) {
if (sapnid != null){
oldObj=document.getElementById(sapnid);
oldObj.className="image";
}
} </head>
<body>
<table> <tr>
<td id="1" onClick="changeBg('1')">首页 </td>
<td id="2" onClick="changeBg('2')">论坛 </td>
<td id="3" onClick="changeBg('3')">下载 </td>
<td id="4" onClick="changeBg('4')">读书 </td>
<td id="5" onClick="changeBg('5')">新闻 </td>
</tr>
</table>
比如function changeBg(sapnid) {
if (sapnid != null){
for(var i = 1; i < 6 ; i++){
oldObj=document.getElementById(i);
if(oldObj.className!=''){
oldObj.className="";
}
}
oldObj=document.getElementById(sapnid);
oldObj.className="image";
}
}
<head>
<style type="text/css">
.image {
border: 1px solid red;
background-image: url('/application/images/selected_bg.gif');
background-repeat:no-repeat;
background-position:left bottom;
}
</style>
<script type="text/javascript">
var current_tab;
function changeBg(tab) {
if (current_tab) current_tab.className = "";
tab.className = "image";
current_tab = tab;
}
</script>
</head>
<body>
<table>
<tr>
<td id="1" onClick="changeBg(this)">首页</td>
<td id="2" onClick="changeBg(this)">论坛</td>
<td id="3" onClick="changeBg(this)">下载</td>
<td id="4" onClick="changeBg(this)">读书</td>
<td id="5" onClick="changeBg(this)">新闻</td>
</tr>
</table>
</body>
</html>