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

它应该是这样的：

onclick="one(); return false;" 

当你点击一个链接时，新页面加载，所以你必须通过编写return false

，以防止这种行为你也可以写

onclick="return one();" 

和javascript：

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

Answer 5

尝试使用jQuery元素的这款装备：

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

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

当你想更新索马里红新月会，或样式，你do't不得不通过在src搜索这样

PS我没有运行上面的代码，但希望你有这个想法:)