禁用URL中的类

Question

我已经设计了一个Wordpress视频博客，以便在查看首页时，内容区域是左对齐的，右侧是侧边栏。 如果访问者单击特定博客文章的页面，则侧边栏将向下移动到内容区域下方，并且内容区域（以及其中的视频）变得更大。

在header.php中，我有一行显示为：

<body<?php if ( is_single() ) {
echo ' class="widescreen" '; } ?>>

并在style.css中

#content {
    float: left;
    width: 660px;
}

.widescreen #content {
    width: 940px;
}

如果有可能，我希望访问者有机会在首页上以较小的视频尺寸查看单个帖子页面，如果他们出于某种原因喜欢这种尺寸，并且不希望在网站上搜索该特定帖子，存档。

我想知道是否可以在禁用“宽屏”类的情况下提供指向该页面替代版本的链接。 尽管不是很明显，但存在以下内容：'website.com/post&class:widescreen=false'。

Answer 1

您可以为此使用Javascript：

document.getElementById("content").className = "";

您可以在此处观看现场演示： http : //jsbin.com/yiducicu/1/

诀窍是在超链接中调用函数，该函数在删除类和重新打开类之间切换。

function setWidescreen(){
   if (document.getElementById("content").className == ""){
     document.getElementById("content").className = "widescreen";
   } else {
     document.getElementById("content").className = "";
   }
}