如何为一个样式表每次刷新随机图像,但在选择另一个样式表时消失


How to have random image each refresh for one style sheet, but go away upon choosing another stylesheet?

我目前正在制作自己的Wordpress主题。我想如果在侧边栏上有一个下拉框,你可以在其中选择不同的主题,它会改变页面背景,边框颜色等,这将是很酷的。

问题是,对于一个主题(默认的),我在header.php文件中有Javascript,其中头图像将在每次刷新时更改。我希望这个标题图像在切换样式表时消失,但它只是重叠另一个。我该如何改变这一点?

如果你想自己看,这个框在右边栏的蓝色按钮下面。这是我的测试网站。忽略000webhost的内容。

http://trainman1405.site11.com/wordpress/

谢谢!

一般的解决方案是在一个工作表中定义所有的样式,但是命名它们,这样您可以简单地在body上更改class,新的样式就会生效。(您也可以使用名称空间在单独的工作表中定义它们,并简单地引用<head>中的每个工作表。)

例如:

body a { color: #00f; } /* default */
body.green a { color: #090; }
body.red a { color: #f00; }

然后当你想改变它时(使用jQuery,尽管纯Javascript也可以完成这项工作):

$('#theme_select').change(function()
{
   $('body').removeClass('green').removeClass('red'); // remove existing classes
   $('body').addClass($(this).val()); 
});

看起来你可以使用一个叫做jquery的javascript库。你可以用它来隐藏和显示新图像,例如

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js"></script> 
<script type="text/javascript">

function piczotheme() {
$("defualttheme").hide()
$("mountaintheme").hide()
//and then show load add your picture
$('#defualt').css("background-image", "url(url of the picture)");


}

</script>

然后你需要设置一个按钮来触发这个效果

所以…

<button onclick="piczotheme()"> click </button>