如何解决单击更改背景图像
| 当用户单击链接时,我想更改水平菜单的背景图像。我只是有点麻烦,我的代码如下:<div class=\"grid_16\" id=\"menu\">
<ul id=\'menuTab\' class=\'sqglDropMenu\'>
<li><a href=\'Home\' onclick=\'changeIt();\'>Home</a></li>
<li><a href=\'profile\' onclick=\'changeIt();\'>Profile</a></li>
<li><a href=\'products\' onclick=\'changeIt();\'>Products</a></li>
<li><a href=\'samples\' onclick=\'changeIt();\'>Samples</a></li>
<li><a href=\'contact\' onclick=\'changeIt();\'>Contact</a></li>
</ul>
</div>
我的JS看起来像这样:
function changeIt(){
document.getElementById(\'menuTab\').style.backgroundImage = \"url(../images/tab_off.png)\";
}
我的CSS,其中设置了初始背景图片:
.sqglDropMenu li {float: left; list-style: none; text-align:left; margin-left:5px; position: relative; display: block; line-height: 30px;}
.sqglDropMenu li a {display: block; white-space: nowrap; float: left; text-align:center; font-size: 1.3em; color: #fff; font-weight:bold; padding-top:5px; margin-top:-1px; background:url(../images/menu_tab.png) no-repeat; width:182px; height:58px;}
.sqglDropMenu li ul {float:left; position: absolute; visibility: hidden; z-index:1000; margin: 0; margin-top:50px; * margin-top: 0px; clear:both; margin-left:-475px; background:url(../images/menuback.png) no-repeat; width:944px; height:60px}
.sqglDropMenu li ul li{float: left; position: relative; clear: left; border-width:0px; display: inline; margin: 0;}
.sqglDropMenu li ul li a{margin-left:20px; border-width:0px; text-align:left; font: 9pt Arial; adding:5px 12px; z-index:100; width: 100px; background:none;}
.sqglDropMenu li ul li a:hover{border-width:0px; background:none;}
任何帮助表示赞赏...。
解决方法
当您单击链接时,您将被重定向到所选页面,因此您的功能将无用,您可以使用
通过获取当前页面并设置锚点的类来设置PHP,该锚点设置您想要的背景或
javascript使用它与php:D相同,您可以通过执行以下操作来做到这一点:
var path = window.location.pathname;
var page = path.substring(path.lastIndexOf(\'/ \')+1);
如果(页面== \'currentpage.html \'){
document.write(\'CurrentPage \')
}其他{
document.write(\'CurrentPage \')
}
我希望这可以帮助你
,试试这个代码
<script type=\"text/javascript\">
$(\'a\').on(\'click\',function(e){
var var1 = this.href.split(\'=\'+img+\')\');
e.preventDefault();
switch(var1[1]){
case \'Home\':
img = \'first.jpg\';
break;
case \'About\':
img = \'second.jpg\';
break;
}
$(\'body\').css({backgroundImage:\'url(image/\'+img+\')\'});
});
,您的浏览器将重定向到href
属性中的值,该属性是您链接的名称。改用ѭ6s处理程序中的changeIt(); return false
。
,尝试设置background
属性:
function changeIt() {
document.getElementById(\'menuTab\').style.background = \"url(../images/tab_off.png)\";
}
ѭ9可能阻止了背景的可见。您可以将此样式直接应用到样式表中,看看会发生什么吗?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。