javascript - 如何使用javascript onClick链接更改背景图像

Question

我希望背景图像随着 html 链接标记上的 onclick 属性而改变。但它不起作用。

<ul>
    <li><a href="index.php?page=Home" onclick="one();">Home</a> </li>
    <li><a href="index.php?page=Achivement" onclick="two();">Achivement</a></li>

    <li><a href="index.php?page=Career" onclick="three();">Career</a></li>
    <li><a href="index.php?page=Message" onclick="four();">Message</a></li>
    <li><a href="index.php?page=opportunity">opportunity</a></li>
    <li><a href="upload1.php">Register</a>
    <li></li>
 </ul>
  <script type="text/javascript">
  function one(){

 $('body').css('background-image','url(image/back1.jpg)');

}
function two(){

   $('body').css('background-image','url(image/back2.jpg)');

}
function three(){


}
function four(){


}  </script>

如您所见，我尝试在 onclick 属性上传递一个函数，并且我已经在底部定义了这些函数，但背景图像仍然不会改变。我已经检查了图像所在的目录，它们是正确的。而且我还没有在我的 css 上定义任何背景图像。我需要帮助，这让我发疯。

Answer 1

几件事:

1. 您需要包含 jQuery 库(如果您还没有的话)
2. 您需要阻止默认操作，因为它是一个链接
3. 您需要对其进行功能化以供重用。

例子:

<script type="text/javascript">
    $(function(){
        $('a').on('click',function(e){
            var href = this.href.split('='),
                img;

            // prevents following to the link location
            e.preventDefault();

            // determines which background image
            switch(href[1]){
                case 'Home':
                   img = 'back1.jpg';
                   break; 
                case 'Achievement':
                   img = 'back2.jpg';
                   break;
                case 'Career':
                   img = 'back3.jpg';
                   break;
                case 'Message':
                   img = 'back4.jpg';
                   break;
                case 'Opportunity':
                   img = 'back5.jpg';
                   break;
            }

            // assigns background-image
            $('body').css({backgroundImage:'url(image/'+img+')'});
        });
    });
</script>

这将允许大量重用，并消除对内联 onclick= 声明的需要。