`
wlbbswl
  • 浏览: 170536 次
  • 性别: Icon_minigender_1
  • 来自: 北京
文章分类
社区版块
存档分类
最新评论

用JS 实现页面左边栏

阅读更多
<HTML>
<HEAD>
<TITLE>开心岛社区</TITLE>
<META content="text/html; charset=gbk" http-equiv=Content-Type>
<script language=javascript src="../inc/cookies.js"></script>
<script>
var stylecook = getCookie("STYLESHOW");
var style;
var strstyle;
if(stylecook=="")
{
 stylecook=1;
}
else
{
 stylecook++;
}
style="main0"+stylecook+".css";
strstyle="<link href=\"../css/"+style+"\"  rel=\"stylesheet\" type=\"text/css\"> ";
document.write(strstyle);
</script>
<script language=javascript>
if(self!=top){top.location=self.location;}
function switchSysBar(){
        var obj=document.getElementById('left');
        var menu=document.getElementById('switchPoint');
        if(obj.style.display=='none'){
               obj.style.display='';
               menu.innerHTML = "<img src=\"../images/ftbbs_close.gif\" style=\"cursor:pointer;\" alt=关闭左栏>";
        }else{
               obj.style.display='none';
               menu.innerHTML = "<img src=\"../images/ftbbs_open.gif\" style=\"cursor:pointer;\" alt=打开左栏>";
        }
}
</script>
<script>
var stylecook = getCookie("STYLESHOW");
var style;
var tmpstylecook;
function setcookies()
{
 tmpstylecook = stylecook;
}
 
function  reloadcook()
{
   var scooks = getCookie("STYLESHOW");
   if(scooks != tmpstylecook)
   {
        window.location.reload();
   }
}
setcookies();
setInterval('reloadcook()',1000);
</script>
<BODY scroll=no style="MARGIN: 0px">
<TABLE border=0 cellPadding=0 cellSpacing=0 height="100%" width="100%">
  <TBODY>
  <TR>
    <TD align=middle id=frmTitle noWrap vAlign=center>
        <IFRAME frameBorder=0 id="left" name=left scrolling=yes src="ftbbstree.htm" style="HEIGHT: 100%; VISIBILITY: inherit; WIDTH: 140px; Z-INDEX: 2"></IFRAME>
        </TD>
    <td>
        <table height="100%" width="12" cellspacing="0" cellpadding="0" class="nar">
          <tbody>
            <tr>
              <td align="center" id="switchPoint" onclick="switchSysBar();" height="100%">
              <img src="../images/ftbbs_close.gif" style="cursor:pointer;" alt=关闭左栏>
              </td>
            </tr>
          </tbody>
        </table>
    </td>
    <TD style="WIDTH: 100%">
        <IFRAME frameBorder=0 id="main" name=main scrolling=yes src="main.asp?layer_1=&layer_2=" style="HEIGHT: 100%; VISIBILITY: inherit; WIDTH: 100%; Z-INDEX: 1"></IFRAME>
        </TD>
  </TR>
  </TBODY>
</TABLE>
 
<SCRIPT>
if(window.screen.width<'1024'){switchSysBar()}
</SCRIPT>
</BODY>
</HTML>
分享到:
评论

相关推荐

    记录原生html+js实现左侧导航栏右侧内容页的实现

    本篇文章将深入探讨如何使用原生HTML和JavaScript实现这种布局。 首先,我们从HTML部分开始。HTML(HyperText Markup Language)是网页的基础结构语言,用于定义网页内容和结构。创建左侧导航栏的基本结构可能如下...

    JS实现京东首页之页面顶部、Logo和搜索框功能

    1、页面头部分三个部分依次实现:五角星图、收藏京东、右边文字部分(用列表实现); 其中当鼠标停放在手机京东上,手机背景图发生变化,变成红色带jd的图案;当鼠标悬停在客服服务上,出现下拉列表。 2、Logo&搜索...

    iframe实现左侧菜单右侧页面简单示例

    "iframe实现左侧菜单右侧页面简单示例"就是一个典型的双栏布局模式,常用于展示左侧导航菜单,右侧则展示对应的内容区域。这种设计模式在很多网站和管理系统中都很常见。 Iframe,全称"Inline Frame",是HTML中的一...

    左边栏菜单隐藏显示

    实现“左边栏菜单隐藏显示”的关键在于使用Bootstrap的`.navbar`、`.navbar-toggle`、`.navbar-collapse`和`.collapse`类。下面是一个简单的代码示例: ```html 品牌 &lt;span class="navbar-toggler-icon"&gt;&lt;/...

    JS原生双栏穿梭选择框

    在JavaScript的世界里,"JS原生双栏穿梭选择框"是一种常见的交互元素,它通常用于数据筛选、分类或分配任务等场景。这个功能的核心在于,用户可以通过选择左侧栏的选项,然后通过点击方向键(或者其他的触发方式)将...

    ASP.NET中iframe框架点击左边页面链接 右边显示链接页面内容

    在***中实现点击左边页面链接时,右边iframe框架显示对应链接页面的内容,是一种常见的网页布局模式,经常被用于后台管理系统中。这种布局允许用户在一个窗口内操作导航,而在另一个子窗口内查看和处理内容,从而...

    左侧菜单栏控制右侧页面内容切换

    在这个场景中,我们关注的是一个基于"jQuery + Bootstrap"的示例项目,它实现了左侧菜单栏控制右侧页面内容切换的功能,并且结合了Bootstrap的弹框展示。下面我们将深入探讨这个项目的核心技术和实现细节。 首先,...

    基于Ajax+div的“左边菜单、右边内容”页面效果实现

    Ajax(Asynchronous JavaScript and XML)技术结合div元素,可以实现“左边菜单、右边内容”的动态加载效果,从而提供更流畅的用户体验,而无需每次操作都刷新整个页面。以下将详细介绍这种效果的实现步骤。 1. **...

    很好用的JS左侧导航菜单,滑过显示,移开隐藏

    标题提到的"很好用的JS左侧导航菜单,滑过显示,移开隐藏"是一种常见的交互设计模式,它利用JavaScript(JS)来实现动态效果,增强用户的浏览体验。这种设计通常被称为“悬停显示”或“滑过菜单”,它在鼠标悬停时...

    左侧栏浮动常驻导航栏js特效代码.zip

    【标题】"左侧栏浮动常驻导航栏js特效代码.zip"所包含的知识点主要集中在JavaScript(简称js)的前端开发领域,特别是关于网页导航栏的设计和实现。这种特效是网页设计中常用的一种技术,用于创建一种始终保持在用户...

    html5点击左侧导航动画切换页面.zip

    同时,开发者可能使用CSS3的过渡(transition)和动画(animation)属性,配合JavaScript来控制元素的移动、缩放、旋转等效果,以实现导航栏的动画过渡。 此外,考虑到项目标签是"JS特效-菜单导航",这表明可能还...

    左侧点击菜单tab切换网页特效

    在IT行业中,网页交互设计是用户体验...通过合理的菜单设计、有效的JavaScript实现和美观的动画效果,可以构建出既实用又吸引人的网页界面。同时,考虑到性能、响应式和无障碍性等因素,可以进一步提升整体的用户体验。

    Q753697 asp.net中点击左侧菜单,右侧显示相应内容

    - 为了提供更好的用户体验,可以使用`UpdatePanel`或纯JavaScript/AJAX技术,实现菜单点击后只更新右侧内容,而不刷新整个页面。 10. **客户端脚本** - 使用JavaScript或jQuery来处理菜单的点击事件,可以实现更...

    vue.js实现左边导航切换右边内容

    - 使用Vue.js框架,可以通过双向数据绑定特性来实现左边导航栏和右边内容的动态切换。 - 导航栏中每个菜单项对应右边的一个视图内容,点击不同的菜单项,可以通过改变视图组件来切换展示的内容。 2. **Vue.js中的...

    html+jquery+CSS实现最简单的右侧导航栏效果

    一个基础的导航栏通常包含`&lt;nav&gt;`元素,里面包含一系列链接或按钮,这些元素通常用`&lt;ul&gt;`(无序列表)和`&lt;li&gt;`(列表项)来构建。对于右侧导航栏,我们可以这样编写HTML: ```html &lt;li&gt;&lt;a href="#"&gt;首页&lt;/a&gt;&lt;/...

    公司工程仿360左边栏多点触控

    这个“公司工程仿360左边栏多点触控”项目旨在实现与360产品类似的交互体验,同时加入了多点触控功能,让用户能够通过手势进行更丰富的操作。这里我们将详细探讨这一技术实现的关键知识点。 首先,我们来看“仿360...

    Js左右滑出菜单栏

    在网页中,JS可以实现丰富的用户交互效果,包括本文提到的“Js左右滑出菜单栏”。这个功能通常用于移动端应用或者响应式网站,为用户提供更便捷的导航体验。 创建一个左右滑出的菜单栏,主要涉及以下几个核心知识点...

    基于Web的个人网页响应式页面设计与实现 HTML+CSS+JavaScript(web前端网页制作课作业)

    - **CSS样式**: 定义CSS样式表,实现页面的布局和美化。 - **JavaScript功能**: 添加交互效果和动态功能,提升用户体验。 #### 3. 测试与优化 - **兼容性测试**: 确保网页能在多种浏览器(如Chrome、Firefox、...

    jquery随着页面下拉固定在页面左侧的导航代码stickySidebar.js.zip

    《使用jQuery实现页面下拉时固定在左侧的导航栏——stickySidebar.js的解析与实践》 在网页设计中,为了提升用户体验,一个常见的需求是创建一个可以随着页面滚动而始终保持在用户视线范围内的导航栏。这通常被称为...

    CSS+JS左侧菜单

    JavaScript还可以用来实现动态加载内容,比如通过Ajax异步获取数据,更新菜单下方的页面区域,这样可以提高用户体验,减少页面刷新。 在实际项目中,可能还会使用到jQuery等JavaScript库,它们提供了一些便捷的API...

Global site tag (gtag.js) - Google Analytics