毕业设计的设计部分笔记6，高阶设计3

最新推荐文章于 2024-08-10 11:46:02 发布
最新推荐文章于 2024-08-10 11:46:02 发布
阅读量677 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： Java 文章标签： table div javascript function tree null
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/solaris_navi/article/details/2154490
本文介绍了一种使用HTML、CSS和JavaScript实现Tab切换效果的方法。通过简单的DOM操作和内联样式更改，实现了不同Tab内容的动态显示与隐藏。此方案避免了动态生成JS代码，简化了开发流程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

Ok。下面就开始分析复杂component了。

 

复杂的component现在开始考虑这几个：

Table

Tree

Tab

Togglebutton

Menu

 

我们先来考虑前两个吧。

一个是table，一个是tree。

Table是这样的。

在HTML中，table为：

<table>

<!--- 如果有表头 ---->

<tr>

<th></th>

<th></th>

</tr>

 

<!--- 内容 ---->

<tr>

<td></td>

<td></td>

</tr>

</table>

其实table翻译起来很容易。因为有些只需要根据xml_parser就可以实现这个。

 

我先写一些关于tab的东西。

就是说，如何去实现这个tab。现在的想法是：tab base on table.

也就是这样的一个table：

Tab1

Tab2

。。。

 

 

<div id=xxx>

 

 

</div>

这样，通过点击tab，执行js，然后用innerHTML来更新处理。

 

这里找到了一个不错的代码：

参见：tab_try1.html

这段代码可以很简单的应用为tab，使用的不是table而是用的<ul>以及div做的，相当不错，最后用css做了边框和link。特别的，他不用动态生成js代码，这个很重要，因为js代码不能动态生成，但是如果用table的话需要动态生成js代码的，来寻找div的identify。

这段代码如下：

function findA(obj)
{
         TagA=obj.getElementsByTagName("a");
         if (TagA.length>0)
        return TagA[0];
}

function findContentDIV(obj)
{
        TagDiv=obj.childNodes;
        var arrDiv = new Array;
        for(i=0;i<TagDiv.length;i++)
         {
                var objDiv = TagDiv[i];
                var re = /div/i;
                var arr = re.exec(objDiv.tagName);
                if(arr != null)
               {
                        if(arr.index == 0)
                       {
                               arrDiv.push(objDiv);
                      }
                }    
        }
        return arrDiv;
}

function chShift(o)
{
        o.style.cursor="pointer";
        var t=o.parentNode;
        var tA=t.getElementsByTagName("a");   
        var tParent=t.parentNode;
        var tParentDIV=findContentDIV(tParent);

        for(i=0;i<tA.length;i++)
        {
                tA[i].className= null;   
                tParentDIV[i].style.display="none";
                if(tA[i]==findA(o))
                {
                        tA[i].className="on";
                        tParentDIV[i].style.display="block";
                }
        }
}

 css：

 ul
    {
    margin:0;
    padding:0;
    list-style-type:none;
    height:24px;
    }
    ul li
    {
    float:left;
    display:inline;
    }
    ul a
    {
    text-decoration: none;
    border-top:1px solid #ddd;
    border-bottom:1px solid #ccc;  
    border-left:1px solid #ddd;
    border-right:1px solid #ddd;
    display: block;
    padding: 5px 0 3px;
    margin-left:-1px;
    width:258px;
    font-weight: bold;
    text-align:center;
    line-height:15px;
    color: #11449E;
    }

    a.on,a:hover
    {
    padding-top: 6px;
    padding-bottom:3px;
    width:259px;
    border: 1px solid #ccc;
    border-bottom: 0;
    background:#DEEBFF;
    }

  应用代码：
<body>

<div>
        <ul>
                  <li onmouseover="javascript:chShift(this)">
                           <a class="on">Tab标题一</a>
                 </li>
                 <li onmouseover="javascript:chShift(this)">
                           <a>Tab标题二</a>
                 </li>
                 <li onmouseover="javascript:chShift(this)">
                             <a>Tab标题n</a>
                  </li>
        </ul>
        <div>Tab标题一对应的内容</div>
        <div>Tab标题二对应的内容</div>
        <div>Tab标题n对应的内容</div>
</div>
</body>
【软考之软件设计师】PPT课件
云轩阁
07-15 4253
系列文章目录 1.元件基础 2.电路设计 3.PCB设计 4.元件焊接 5.板子调试 6.程序设计 7.算法学习 8.编写exe 9.检测标准 10.项目举例 文章目录前言 前言 送给大学毕业后找不到奋斗方向的你（每周不定时更新） 上海市职业能力考试院 中国计算机技术职业资格网 上海市社会化评审职称申报指南 ...
自动驾驶规划部分学习笔记
最新发布
yangxiaoper的博客
09-06 1174
毕业后就转行了，没做完笔记，反正也没人看。
800多套单片机毕业设计
热门推荐
ucas_123的博客
10-09 2万+
对大部分同学来说，毕业设计根本不知道从哪下手，完全处于蒙圈状态，为帮助大家能顺利毕业，精心准备800多套单片机毕业设计与您分享！ 其中有基于单片机设计的数字示波器、倒车雷达、电子密码锁、智能家居、停车场管理系统、万年历、智能插座等不同方向的典型设计实例，每个实例都提供了设计报告、源代码、电路图等全部设计资料，这些设计资料有利于即将毕业的同学分析、理解并进行毕业设计的制作和论文的编写。 下载链接见：800多套单片机毕业设计 - 阿波罗代码网 0001、PC 机与单片机通信(RS232 协议) 000.
【计算机毕业设计】027学校运动会信息管理系统
卓怡学长的博客
07-31 2069
在当今社会上，体育运动越来越普及，参与运动会的人越来越多，但是目前对运动会信息管理还是处于手工记录的时代，这远远满足不了现在用户需求，因此建立一个运动会信息管理系统已经变的非常重要。 本文重点阐述了学校运动会信息管理系统的开发过程，以实际运用为开发背景，基于B/S结构，运用了JSP技术和MYSQL作为系统数据库进行开发，充分保证系统的安全性和稳定性。本系统界面良好，操作简单方便，通过系统概述、系统分析、系统设计、数据库设计、系统测试这几个部分，详细的说明了系统的开发过程，最后并对整个开发过程进行了总结，实
毕业设计的设计部分笔记4，高阶设计1
Solaris_navi Tech Space
03-06 745
 Lv2的设计在下面开始。以下：1、  具体的流程设计2、  Lv2的设计，有tab，table，togglebutton，tree等等 首先呢，就是关于具体的流程设计。在lv1中讨论了engine如何对其进行解析，不过，总体的流程应该如何去做，这个也是现在要讨论的问题。首先是测试方案。也就是如何来测试这些脚本，而不是一上来就开始写engine。测试的方案也
毕业设计的设计部分笔记5，高阶设计2
Solaris_navi Tech Space
03-06 727
 咱们继续。其实，一个xml的parser做到这个份儿上也就差不多了。后面需要的就是另外的一个module来去做填表的事情，还有一个module去做translate的事情。 Fill the table将生成的内容填写到表中。那么这个表是什么呢。Js中有array数组。但是这个数组是1d的，没有多d的数组支持，至少IE6是这样。那怎么样来实现呢。这里通过自己创建函数来
软件设计师选择题笔记（完善中）
weixin_63103871的博客
01-16 2305
证书主要考察知识的广度，也就是说大部分都是记背的东西，主要涉及计算机网络、计算机组成原理、计算机操作系统、数据结构、软件工程、数据库等多个课程的学习。
【计算机毕业设计】基于SSM++jsp的学校运动会信息管理系统【源码+lw+部署文档+讲解】
2665000101@qq.com
04-28 773
目录 摘 要 Abstract 1 绪论 1.1研究背景 1.2设计原则 1.3论文主要内容 2 相关技术简介 2.1 JSP技术 2.2 B/S结构 2.3 MYSQL数据库 2.4 JAVA技术 2.5 Tomcat简介 3 系统分析 3.1 可行性分析 3.1.1 技术可行性 3.1.2 经济可行性 3.1.3 操作可行性 3.1.4 时间可行性 3.2 系统性能分析 3.3 系统功能分析 3.4 系统流程分析 3.4.1注册流程 3.4.2
学校运动会信息管理系统 java vue 毕业设计 附源码
liligua的博客
08-10 494
学校运动会是一项大型的校园活动，涉及到大量的学生、教师以及各类赛事信息的管理工作。为了提高组织效率和参与体验，本文设计并实现了一个基于SSM框架（Spring, SpringMVC, MyBatis）的学校运动会信息管理系统。该系统采用前后端分离的开发模式，前端使用Vue技术构建动态交互的用户界面，后端选用Java语言进行稳定的业务逻辑处理，结合MySQL数据库和MyBatis持久层框架以及HTML, JS, CSS等技术进行系统开发，旨在为运动会的筹备和运行提供一个全面的信息管理平台。
建筑设计用计算机要求高吗,建筑设计电脑怎么选？高配置性能是关键
weixin_42306501的博客
07-14 4805
明明i5已经够用了，为什么英特尔还在不停地出i7、i9？ 估计普通的电脑玩家在电脑性能配置上，都会如此容易满足。 但对于建筑设计师而言，制图所需要的配置，就不是这么简单了。有人说，每一个建筑设计师的电脑都是一台怪物：CPU吃不吃？吃！吃多少？i7以上有多强吃多少！显卡吃不吃？吃！吃多少？核数解析精度越高越好！内存吃不吃？吃！吃多少？8GB以上，吃不封顶！硬盘吃不吃？吃！吃多少？SSD混合HDD最好...
android设计模式总结，kotlin书籍推荐
2401_84412961的博客
04-22 831
一线互联网Android面试题含详解（初级到高级专题）这些题目是今年群友去腾讯、百度、小米、乐视、美团、58、猎豹、360、新浪、搜狐等一线互联网公司面试被问到的题目。并且大多数都整理了答案，熟悉这些知识点会大大增加通过前两轮技术面试的几率如果设置门槛，很多开发者朋友会因此错过这套高级架构资料，错过提升成为架构师的可能。这就失去了我们的初衷；让更多人都能通过高效高质量的学习，提升自己的技术和格局，升职加薪。最后送给大家一句话，望共勉，永远不要放弃自己的梦想和追求；
毕业设计MATLAB_牛顿插值公式的脚本.zip
02-17
其中\( y_i \)是数据点的y值，\( x_i \)是对应的x值，\( f[x_{i-1}, x_i] \)表示在\( x_i \)处的一阶差商，即\( \frac{f(x_i) - f(x_{i-1})}{x_i - x_{i-1}} \)，而更高阶的差商以此类推。 在MATLAB中，编写牛顿...
高阶用户运营体系搭建
weixin_43320465的博客
01-16 3694
这里写目录标题第1章 理解用户运营本质1. 什么是“用户运营”？2.一个“用户运营”重点关注什么？3.怎么做好用户运营？4.高阶用户运营体系搭建5.大规模用户运营体系的3大子系统6.用户留存的归因/活跃差模型7.用户运营基本功之用户召回法第2章 用户分层和精细化运营落地1.了解用户分层的本质2.四种常见的用户分层介绍3. 用户生命周期分层法4.RFM分层方法应用5.怎么使用AARRR模型对用户分层6.面对用户不同需求时在做用户分层案例：详解豆瓣是如何做用户分层的必修9：怎么用金字塔分层法做用户分层？第3
Zkoss.. Fuck! use Model in forEach
Solaris_navi Tech Space
03-09 3629
                                import de.valuegrids.usermanage.*;            import de.valuegrids.usermanage.utils.*;                                              DBOperator dbo =
关于 XML 解析中的 setNamespaceAware
Solaris_navi Tech Space
06-20 2935
这个其实很 tricky 如果你需要让 DOM 解析的时候 NamespaceAware，就将这个值设置为 true 这个时候 root 中的 xmlns 会起作用 但是！ 在处理单个文件的时候，有的时候这货很 scheisse 。。。 所以将这个值设置为 false 不理会域名空间就可以了。
Get 415: Unsupported Media Type when posting something to Restful WS
Solaris_navi Tech Space
05-02 2762
if you have a restful ws written like this: @Path("/doadd") @POST @Consumes("application/x-www-form-urlencoded") @Produces({MediaType.TEXT_HTML}) public String doadd(@FormParam(
毕 业 设 计 论 文 ......
Solaris_navi Tech Space
05-03 2092
  北京信息科技大学 毕 业 设 计（论 文）        题    目：GUIXML解释引擎的JavaScript的设计与实现                         学    院：         计算机学院               专    业：      计算机科学与技术          
Logger 的初始化
Solaris_navi Tech Space
05-07 1920
// Create Logging PatternLayout layout = new PatternLayout("%r [%t] %-5p %c - %m%n"); ConsoleAppender consoleAppender = new ConsoleAppender( layout ); logger.addA
修复在 Eclipse 中调试webapp时发生 java.lang.ClassNotFoundException: bsh.xxx 错误
Solaris_navi Tech Space
03-11 1648
Eclipse 就是一个SB。。。 这样。 在项目右键-->Run as/Debug as...--> Configure... 然后选择对应的 web app server  然后在 class path 中强行添加需要的 jar 文件 （Add a ext. JAR），比如 bsh.jar,虽然已经在build的文件夹中，但eclipse里面的tomcat却找不到这
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值