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

一些事情：

您需要包含jQuery库（如果您还没有）
您需要阻止默认操作，因为它是一个链接
您需要对其进行功能化以便重复使用。

示例：

<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");
}

这样当你想要更新srcs或样式时，你不必去搜索src

P.S。我没有运行上面的代码，但希望你能得到这个想法：）

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

6 个答案: