快速隐藏或显示你的侧栏

网络博客 郑永 6046℃ 9评论 单栏模式

不知道细心的你是不是会遇到这样一个问题,当你发表一张大图片的时候,因为文章旁边多了一个侧栏,使你的文章显示的空间太小,于是一部分图片就无法完整查看.这个时候你是不是很希望能把侧栏先隐藏一下,让文章自动显示空间扩大,这样子你的粉丝就可以查看整个画面的图片了怎么样实现了? 接下来听郑永一一道来.

首先,对新手而言,开启MyCSS + Page Header & Footer 这个插件,这个可以让你不用修改PHP源文件就可以在你的站上自由的添加CSS或则博客头部和尾部代码,当然如果你用别的方法也可以,比如修改源代码或则在侧边加个文本来添加代码都可以.
首先要添加的代码是:

<a onclick=”expand_sidebar(sidebar)”>显示/隐藏侧栏</a>
<script language=”Javascript”><!–
function expand_sidebar(obj){
if(obj.style.display == “”){
 obj.style.display = “none”;
 content.style.width = “92%”;
 }
else{
 obj.style.display = “”;
 content.style.width = “67%”;
 }
}
–></script>

这段的代码作用是,点击”显示/隐藏侧栏“,就会让侧栏隐藏,然后文章区的宽度就会被设置为总宽度的92%显示,侧边这个时候就没了,再按一下,侧边就出来了,很不错吧.

最后郑永还要告诉你一个东东,让人网友按隐藏是不是很不方便啊?有的网友说不定还没注意到你那个隐藏东东用来做什么的.这个时候就需要我们自己在发表文章的同时随便在文章尾部加入一段代码,就可以实现自动隐藏了(不要急,代码在下面),是不是很酷?例如:你要做单独页面等,都可以用这方法把侧边隐藏,如本站的”在线翻译”页面:http://www.xptt.com/fanyi/ 进去了发现什么? 对,就是这种效果,显示完侧边了以后,等页面完整显示完后才隐藏掉,这个效果不错吧.至少本人觉得不错,对于侧边有放照片或则个人介绍的时候,还可以让网友看一下你侧边的信息一会,然后在隐藏.

好了,教程到这里就结束了,最后感谢mercy.net.cn一起探讨此问题,此教程献给咋支持yo2.cn的们新手们,希望大家可以共同进步,一起探讨.

实现自动隐藏在文章中所需要插入的代码:<body onload=”expand_sidebar(sidebar)”>

赶快也回去试试吧,别忘了有什么疑问在这里留言.

转载请注明:郑永博客 » 快速隐藏或显示你的侧栏

历史上的今天:

(9)个小伙伴在吐槽
Loading...
  1. 山水天下2007-05-15 11:02 Unknown Unknown 回复

    8) 这个代码挺有趣,还会动.
    谢谢哈,回去也试试 .

    沙发!
  2. 好主意2007-05-15 11:06 Unknown Unknown 回复

    我怎么没想到,的确很实用 ~~

    板凳!
  3. John2007-05-15 13:04 Unknown Unknown 回复

    精彩精彩 收藏了 8)

    地板!
  4. mercy2007-05-16 09:46 Unknown Unknown 回复

    呵呵~
    “最后感谢mercy.net.cn一起探讨此问题”
    :oops: :oops: :oops:

    回复:呵呵,事实如此,再次谢谢!

    4楼
  5. chamy2007-05-20 17:53 Unknown Unknown 回复

    好,很方便~~

    5楼
  6. SAM2007-05-21 15:48 Unknown Unknown 回复

    无法使用代码, 是不是不正确, 我的却不行哦。
    5460.YO2.CN

    回复:代码复制的时候是中文的符号,你需要修改下英文符号,尤其是引号。

    6楼
  7. SAM2007-05-24 17:23 Unknown Unknown 回复

    还是无法使用。。是否代码错误。。5460.yo2.cn

    回复:因为你复制的代码有问题,符号必须是英文的,请仔细检查拼写。

    7楼
  8. taglife2008-12-11 04:13 Unknown Unknown 回复

    Whoops! That Page Isn’t Here
    If you are looking for a specific post, please use the search bar at the top of the page.
    看不到效果…

    回复:注意代码中的符号,我的符号是中文符号。

    8楼
  9. sigmy2009-02-18 12:30 Unknown Unknown 回复

    还是不管用啊!请修改正确的代码后再回帖,感谢之极!

    9楼
gravatar
发表我的评论
取消评论


Hi,请填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址