js折叠

最新推荐文章于 2024-11-11 23:26:32 发布
最新推荐文章于 2024-11-11 23:26:32 发布
阅读量443 收藏
点赞数
文章标签： border menu table class xhtml html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shuyu586813/article/details/2711238
版权
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=" />
 <meta name="Design Corp" content="kevin" />
 <meta name="Designer" content=" www.bluekevin.com" />
 <meta name="Designer mail" content=" kevin_218@.163.com" />
 <meta name="Keywords" content="" />
 <meta name="Description" content="" />
 <title>简单实用折叠菜单</title>
 <STYLE>
.hide{display:none;}
.show{display:block;}
.pointer{cursor:pointer;}
</STYLE>
</head>
<body>
<table id="menu" width="200"  border =1 align="center" cellpadding="0" cellspacing="0" bordercolor="#000" >
 
  <!--Begin #-->
   <tr class="pointer" οnclick="Menu(this);">
    <td height="28" align="center" >
    <table width="150"  border="0" cellpadding="0" cellspacing="0">
   <tr align="center">
     <td>好友列表</td>      
   </tr>
    </table>
    </td>
  </tr>
  <tr class="show" >
    <td align="center" valign="top">
 <table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td align="center">Menu Item</td>
        </tr>
  <tr>
          <td align="center">Menu Item</td>
        </tr>
  <tr>
          <td align="center">Menu Item</td>
        </tr>
      </table>
   </td>
  </tr>
  <!--End #-->
 
<!--Begin #-->
<tr class="pointer" οnclick="Menu(this);">
    <td  align="center" >
      <table width="100%"  border="0" cellpadding="0" cellspacing="0">
        <tr align="center">
          <td>在线人数</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr class="hide">
    <td align="center" valign="top"> <table width="64" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td align="center">1</td>
        </tr>
        <tr>
          <td align="center">2</td>
        </tr>
      </table>
   </td>
  </tr>
<!--End #-->
  <!--Begin #-->
<tr class="pointer" οnclick="Menu(this);">
    <td  align="center" >
      <table width="100%"  border="0" cellpadding="0" cellspacing="0">
        <tr align="center">
          <td>聊天室</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr class="hide">
    <td align="center" valign="top"> <table width="64" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td align="center">1</td>
        </tr>
        <tr>
          <td align="center">2</td>
        </tr>
      </table>
   </td>
  </tr>
<!--End #-->
<!--Begin #-->
<tr class="pointer" οnclick="Menu(this);">
    <td  align="center" >
      <table width="100%"  border="0" cellpadding="0" cellspacing="0">
        <tr align="center">
          <td>黑名单</td>
        </tr>
      </table>
    </td>
  </tr>
  <tr class="hide">
    <td align="center" valign="top"> <table width="64" border="0" align="center" cellpadding="0" cellspacing="0">
        <tr>
          <td align="center">1</td>
        </tr>
        <tr>
          <td align="center">2</td>
        </tr>
      </table>
   </td>
  </tr>
<!--End #-->
  <tr>
    <td height="200" > </td>
  </tr>
  <tr>
    <td >footer</td>
  </tr>
</table>
<script>
function Menu(obj)
{ 
 var tb=document.getElementById("menu");
 for(i=0;i<8;i++)
 {
  if(i % 2 ==1)
  {
   tb.rows[i].className="hide";
  }
 }
 
 if(obj.className="pointer" )
 {
  if(tb.rows(obj.rowIndex+1).className=="show")
  {
   tb.rows(obj.rowIndex+1).className="hide";
  }
  else
  {
   tb.rows(obj.rowIndex+1).className="show";
  }
 }
}
</script>
</body>
</html>
shuyu586813
关注
js折叠特效
03-20
"js折叠特效"是JavaScript在网页设计中常用的一种技巧，它允许用户通过点击或触发某些事件来隐藏或显示特定内容，提升网页的可读性和空间利用率。 1. 折叠与展开的基本原理： 折叠特效的核心是改变HTML元素的`...
js折叠工具
04-08
"js折叠工具"通常指的是利用JavaScript实现的，能够帮助用户在网页上对内容进行折叠和展开操作的脚本工具。这种工具对于优化页面布局、提高用户体验和管理大量信息具有重要作用。 折叠工具的基本原理是通过...
js折叠插件
01-22
"js折叠插件"是针对VS2010的一个扩展插件，名为"JSEnhancements"，它的主要功能就是增强VS2010对JavaScript文件的编辑体验，尤其是提供了折叠代码的能力。通过这个插件，开发者可以将js和css文件中的方法或代码块...
Visual Studio JavaScript 折叠插件
09-21
Visual Studio JavaScript 折叠插件(支持Visual Studio 2005、2008)，下载并安装，重启Visual Studio 2005、2008，选中需要折叠的JavaScript、HTM代码，点击提示图标，填写显示文字。完毕！
网站后台页面左侧js折叠菜单代码
11-20
"网站后台页面左侧js折叠菜单代码" 提供的就是这样一种功能，它利用JavaScript（js）技术实现了一种动态的、可折叠的菜单，使后台界面更加整洁、用户友好。下面我们将深入探讨这一主题。 折叠菜单是一种常见的UI...
delphi调用百度API获取token
最新发布
11-11 259
client_id和client_secret 是你创建百度应用的时候生成的。
认识HTML（简介）
gjgeiugrwhgrewg的博客
11-11 485
只要将内容上传到互联网，并将其与他人创建的页面相链接，你就成为了万维网的积极参与者。在这里，你将掌握一些重要的概念和语法，学习如何将 HTML 用于文本、如何创建超链接以及运用 HTML 去构建一个网页。该部分提供了一些链接，它们指向那些你在构建 Web 页面的过程中最常见的问题的解决方法：如何处理网页标题、添加图片或视频、强调某些内容、建立基本的表单等。这个模块将带领你探索如何使用 HTML 在你的网页中包含多媒体内容，包括通过许多不同的方式嵌入图片，以及如何嵌入视频、音频甚至整个其他网页。
W3C HTML 活动
wjs2024的博客
11-08 408
W3C于2008年1月22日发布了HTML 5的工作草案。W3C不仅推动了HTML语言的发展，也促进了Web技术的标准化和普及【7†source】【8†source】【9†source】。这个版本在HTML 2.0的基础上增加了许多广泛使用的特性，如字体、表格、applets、围绕图像的文本流、上标和下标等。它是HTML的早期版本，但目前已不再使用，因为现有的浏览器都依赖于更新的HTML版本。关于W3C（万维网联盟）的HTML活动，我们可以从HTML的不同版本的发展历程中了解其主要的活跃时期和贡献。
HTML查缺补漏
lalalalalab的博客
11-11 411
html查缺补漏
JavaScript如何操作HTML：动态网页构建指南
weixin_43822401的博客
11-11 606
在现代网页开发中，JavaScript不仅是实现网页交互性的关键技术，也是动态操作HTML文档对象模型（DOM）的重要工具。通过JavaScript，开发者可以在运行时修改网页的内容、结构和样式，从而为用户提供更加丰富和动态的体验。本文将详细介绍如何使用JavaScript来操作HTML，包括元素的创建、属性的修改、内容的更新以及事件的处理。
HTML DOM 属性
wjs2024的博客
11-11 271
HTML DOM属性是DOM元素的特性，它们定义了元素的属性和行为。这些属性可以是标准的HTML属性，如idclassstyle等，也可以是自定义属性。DOM属性用于获取和设置元素的值，以及控制元素的行为。HTML DOM属性是HTML文档编程接口的重要组成部分，它们允许我们通过JavaScript等脚本语言访问和操作网页的元素和内容。了解和掌握HTML DOM属性的使用，对于前端开发来说非常重要。希望本文对您有所帮助！
记录一次非常奇怪的MIME type of “text/html“报错
chengpei147的博客
11-07 272
访问指定地址，一直转圈打不开，打开游览器控制台发现有如下报错：网上搜索相关内容都是说vite打包相关的问题，需要重新打包什么的，但是我这里就更奇怪了，请求js返回的相应头里content-type: application/javascript，并不是大多数人返回的text/html，但是游览器就是报了这个错，当我换个游览器再试居然是好的，只是chrome会报错。
html第一个网页
Qhumaing的博客
11-06 1358
创建你的第一个HTML网页是一个激动人心的步骤。
一、HTML
kkkkatoq的博客
11-11 231
内核是浏览器的核心，用于处理浏览器所得到的各种资源。例如，服务器发送图片、视频、音频的资源，浏览器就需要使用内核来进行处理这些资源。内核处理完这些资源之后，我们才能看到页面。这五大浏览器都有自己的内核。五大浏览器，四大内核。不在这五个之中的统称为其他浏览器。其他浏览器就是在上述的内核的基础上，加上了一些精美的UI界面，实用的小功能等等。
【前端】html的8个常用标签
Wuweinan_190cm的博客
11-07 973
超文本链接语言——HTML
FastHtml llmctx介绍
东方佑
11-10 441
这份文档似乎是一份 FastHTML 库的用户指南，它将 Starlette、Uvicorn、HTMX 和 fastcore 的。“快速标签” 结合起来，用于创建服务器渲染的超媒体应用程序。
FastHTML快速入门：服务器渲染超媒体应用的利器
东方佑
11-11 426
FastHTML是一个Python库，它将Starlette、Uvicorn、HTMX和fastcore的FT"FastTags"融合在一起，用于创建服务器渲染的超媒体应用程序。FastHTML类本身继承自Starlette，并增加了基于装饰器的路由、Beforeware、自动将FT渲染为HTML等功能。
HTML 鼠标滑动 页面的header背景从透明色变为黑色
觅_的博客
11-06 464
要实现当鼠标滑动时，页面的header背景从透明色变为黑色，你可以使用JavaScript来监听滚动事件，并根据页面的滚动位置来改变header的背景颜色。
探索 HTML 和 CSS 实现的 3D 开关按钮
weixin_52814911的博客
11-11 364
这段代码是一个HTML和CSS的组合，用于创建一个3D风格的开关按钮（通常用于控制某些设置的开启或关闭）
JavaScript 实现动态折叠效果
本文档主要介绍了如何使用...总结来说，这是一个基础的JavaScript折叠功能示例，通过动态调整元素高度，实现了文本内容的简略展示和完全展开，增强了用户体验。对于学习JavaScript动态页面交互和CSS布局技巧很有帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值