javascript背景图像随php页面调用而变化

Question

我有一个带有几个“a”标签的 html，它调用特定的页面，我添加了一个 onclick 属性，其中根据点击的链接发生背景变化的功能。这是 html

<ul>
    <li><a href="index.php?page=Home " onclick="changeImage(1);">Home</a> </li>
    <li><a href="index.php?page=Achivement" onclick="changeImage(2); ">Achivement</a></li>

    <li><a href="index.php?page=Career" onclick="changeImage(3); return false;">Career</a></li>
    <li><a href="index.php?page=Message" onclick="#">Message</a></li>
    <li><a href="index.php?page=opportunity">opportunity</a></li>
    <li><a href="upload1.php">Register</a>
    <li></li>
 </ul>

和定义函数的 javascript 文件。

function changeImage(number)
{

$.post('core/changebg.php',{number:number},

    function(data)
    {

         $('body').css('background-image','url("image/'+number+'.jpg")');


    });
}

和它引用的 php 文件

<?php
   if(isset($_POST['number']))
   {

  session_start();
  $_SESSION['image']=$_POST['number'];

  }

if(isset($_GET['resetBg'])){

   session_start();
   session_destroy();
}?>

我卡住了，因为如果我清空 href 元素，那么这段代码将完全按照我想要的方式工作，但是，我也想要页面调用，它不起作用的原因是页面已经重新加载并且无法像我一样执行功能其他帖子上说的。所以我希望它能通过 1. 在我单击链接时更改背景图像，2 调用页面内容来工作。我尝试通过 javascript 重定向，但它仍然无法正常工作。谢谢您，我们将不胜感激您的回答/建议。

Answer 1

你的做法是错误的。你需要:

1. 让点击事件按预期进行，并通过将类应用于 body(首选)或对 body 进行内联样式来更改背景图像(更差)或在加载时调用 JavaScript(最差)。

2. 通过 AJAX 加载内容并完全跳过页面刷新。

看看您在上面所做的事情，第二个选项对您来说可能不是一个很好的选择。您当前的 AJAX 调用很奇怪，因为它似乎对从服务器返回的数据根本没有做任何事情。也许您已经在使用您放入 session 中的点击链接信息？我真的不知道。