如何使用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我還沒有運行上面的代碼，但希望您能明白:)