如何使用 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

我总是尝试将图像 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

附言我没有运行上面的代码，但希望你能明白:)