如何使用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=声明。

Answer 2

点击的同时带有href。 您需要将链接指定为

<li><a href="#" onclick="one();">Home</a> </li>

您将需要通过javascript重定向到该页面。 否则，您本质上是在要求它去将您重定向到URL并调用您的javascript，但是如果发生重定向，您怎么会看到javascript执行的结果呢？

Answer 3

删除内联脚本和所有函数，然后尝试以下操作：

$(function () {
    $('ul li a').on('click', function (e) {
        e.preventDefault)();
        $('body').css('background-image', 'url(image/back' + $(this).closest('li').index() + '.jpg)');
    });
});

如果您只想定位前4 li ，则可以在我的代码中添加if($(this).closest('li').index() < 5){ change background };

关于您拥有的链接（如果要使用它们）

Answer 4

尝试将此方法用于jQuery元素：

$(function() {
  $('elementLink').on('click', function(e){
       e.preventDefault();
       $('body').css('background-image','url(image/back1.jpg)');
  });
});

Answer 5

应该是这样的：

onclick="one(); return false;"

当您单击链接时，将加载新页面，因此您必须通过编写return false来防止此行为

你也可以写

onclick="return one();"

和javascript：

function one(){
  $('body').css('background-image','url(image/back1.jpg)');
  return false;
}

Answer 6

我将始终尝试将image src决策保留在代码之外，并将其移入CSS文件。 就像是：

// could be good to keep your url params as lower case as a convention, then this
// options object could be skipped and you'd just use the param as the classname
var options = {
  'Home': 'home',
  'Achievement': 'achievement'
};

$("ul li a").click(function(e){
  e.preventDefault();

  var href = $(this).attr("href");

  if(href[1])
  {
    $("body").addClass(options[href[1]]);
  }

});

然后在你的css文件中

body.achievement
{
  background: url("/images/some_img.png");
}

body.home
{
  background: url("/images/some_img2.png");
}

这样，当您要更新src或样式时，就不必搜索src了

ps我还没有运行上面的代码，但希望您能明白:)