当用户点击菜单按钮并导航到不同的网页时，我试图更改我的网站背景图片(在 body 标签处)。
我在 _Layout.cshtml 中使用 jquery 并这样做:
<body>
<div class="page">
<header>
<br />
<div id="menubutton">
<a href="@Url.Action("Index", "Kitchen")" id="bg1">
<img src="../../Content/Layout_images/menu_kitchen.png" alt="kitchen" /></a>
<a href="@Url.Action("Index", "Stock")" id="bg2" >
<img src="../../Content/Layout_images/menu_stock.png" alt="stock" /></a>
<a href="@Url.Action("Index", "Shop")" id="bg3" >
<img src="../../Content/Layout_images/menu_shop.png" alt="shoppinglist" /></a>
</div>
<script type="text/javascript">
$(function () {
$('#menubutton a').live('click', function () {
// Get the background class from id
var bgclass = $(this).attr('id');
var temp = "url('Content/Layout_images/bg2.jpg')";
$('body').css('background-image', temp);
alert($('body').css('background-image'));
// Set the clicked menu button color
var menuclass = bgclass + "_menu";
$(this).removeClass();
$(this).addClass(menuclass);
});
});
然而，虽然当用户点击菜单按钮时背景图像发生变化，但它会立即变回 css 中设置的默认背景图像(注意:即使我在 css 中设置任何背景图像，它也会立即变回空白页面重定向后的背景)
知道为什么会这样吗？如果没记错的话，jquery .css() 假设会改变特定 dom 的 css？为什么跳转到其他页面还是会重置？
希望能在这里得到一些帮助...谢谢...
最佳答案
当您单击该按钮时，您将被重定向到一个新的 URL 并重新加载布局文件。这意味着您需要一些方法来在加载新 URL 时保留背景图像信息。
@Url.Action("Index", "Kitchen", new { bgImage = 'image url here'} )
然后在布局文件中，写一个js函数(在$(document).ready(function() {})里面)设置这个bgImage参数为背景图片。
关于jquery - 重定向后由 jQuery 重置的背景图像，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7857913/