JS实现标签效果

最新推荐文章于 2020-04-27 12:53:18 发布
最新推荐文章于 2020-04-27 12:53:18 发布
阅读量1.4k 收藏
点赞数
分类专栏： CSS/HTML/JAVASCRIPT 文章标签： microsoft border table javascript class html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/phoebird/article/details/3890931
版权

 <html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<STYLE type=text/css>.sec1 {
 BORDER-RIGHT: gray 1px solid; BORDER-TOP:
#ffffff 1px solid; BORDER-LEFT: #ffffff 1px
solid; CURSOR: hand; COLOR: #000000; BORDER-
BOTTOM: #ffffff 1px solid; BACKGROUND-COLOR:
#eeeeee
}
.sec2 {
 BORDER-RIGHT: gray 1px solid; BORDER-TOP:
#ffffff 1px solid; FONT-WEIGHT: bold; BORDER-
LEFT: #ffffff 1px solid; CURSOR: hand; COLOR:
#000000; BACKGROUND-COLOR: #d4d0c8
}
.main_tab {
 BORDER-RIGHT: gray 1px solid; BORDER-
LEFT: #ffffff 1px solid; COLOR: #000000; BORDER-
BOTTOM: gray 1px solid; BACKGROUND-COLOR: #d4d0c8
}
</STYLE>
<!--JavaScript部分-->
<SCRIPT language=javascript>
function secBoard(n)
{
    for(i=0;i<secTable.cells.length;i++)
      secTable.cells[i].className="sec1";
    secTable.cells[n].className="sec2";
    for(i=0;i<mainTable.tBodies.length;i++)
      mainTable.tBodies[i].style.display="none";
    mainTable.tBodies[n].style.display="block";
}
</SCRIPT>
<!--HTML部分-->
<TABLE id=secTable cellSpacing=0 cellPadding=0 width=549 border=0>
<TBODY>
 <TR align=center height=20>
     <TD class=sec2 οnclick=secBoard(0) width="10%">关于TBODY标记</TD>
        <TD class=sec1 οnclick=secBoard(1) width="10%">关于cells集合</TD>
  <TD class=sec1 οnclick=secBoard(2) width="10%">关于tBodies集合</TD>
        <TD class=sec1 οnclick=secBoard(3) width="10%">关于display属性</TD></TR></TBODY></TABLE>
        <TABLE class=main_tab id=mainTable height=240 cellSpacing=0 cellPadding=0 width=549 border=0><!--关于TBODY标记-->
              <TBODY style="DISPLAY: block">
              <TR>
                <TD vAlign=top align=center><BR><BR>
                  <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      <TD>指定行做为表体。<BR>注释：TBODY要素是块要素，并且需要结束标签。<BR>即使如果表格没有显式定义TBODY
要素，该要素也提供给所有表。<BR><BR>
参考：《动态HTML参考和开发应用大全》（人民邮电出
版社      Microsoft Corporation著
                    北京华中兴业科技发展有限公司 译）
<BR><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于cells集合-->
 <TBODY style="DISPLAY: none">
              <TR>
                <TD vAlign=top align=center><BR><BR>
                  <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      <TD>检索表行或者整个
表中所有单元格的集合。<BR>应用于TR、TABLE。
<BR><BR>参考：《动态HTML参考和开发应
用大全》（人民邮电出版社 Microsoft Corporation著
                    北京华中兴业科技发展有限公司）
<BR><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于tBodies集合-->
              <TBODY style="DISPLAY: none">
              <TR>
                <TD vAlign=top align=center><BR><BR>
                  <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      <TD>检索表中所有TBODY
对象的集合。对象在该集合中按照HTML源顺序排列。
<BR>应用于TABLE。<BR><BR>参考：
《动态HTML参考和开发应用大全》（人民邮电出版社
                        Microsoft Corporation著
                    北京华中兴业科技发展有限公司译）
<BR><BR></TD></TR></TBODY></TABLE></TD></TR></TBODY><!--关于display属性-->
              <TBODY style="DISPLAY: none">
              <TR>
                <TD vAlign=top align=center><BR><BR>
                  <TABLE cellSpacing=0 cellPadding=0 width=490 border=0>
                    <TBODY>
                    <TR>
                      <TD>设置或者检索对象
是否被提供。<BR>可能的值为block、none、
inline、list-item、table-header-group、table-
footer-group。<BR>该特性可读写，块要素默认
值为block，内联要素默认值为inline；层叠样式表
（CSS）属性不可继承。<BR><BR>参考：《
动态HTML参考和开发应用大全》（人民邮电出版社
                        Microsoft Corporation著
北京华中兴业科技发展有限公司译）
<BR><BR><A href="javascript:if(confirm('http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp?frame=true  http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp?frame=true'" tppabs="http://msdn.microsoft.com/workshop/author/dhtml/reference/properties/display.asp?frame=true" target=_blank>点击此处
</A>可参阅微软<A href="javascript:if(confirm('http://msdn.microsoft.com/  http://msdn.microsoft.com/'" tppabs="http://msdn.microsoft.com/" target=_blank>MSDN在线</A>上的解释。
</TD></TR></TBODY></TABLE></TD></TR></TBODY></TABLE></body></html>

phoebird
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
用js实现自定义标签
11-28
用js实现自定义标签,用js实现自定义标签,用js实现自定义标签
js实现tag标签效果
weixin_34210740的博客
12-17 883
为什么80%的码农都做不了架构师？>>> ...
JS+DIV实现标签页
护雪在线
10-29 3109
 效果图：http://www.happyshow.org/sample/20061108/tags.html源码如下： 标签示例 body { font-size:14px; font-family:"宋体"} ol li { margin:8px} #con { font-size:12px; width:600px; margin:0 auto} #tags { heigh
JS实现标签页效果
在奋斗的路上
03-27 5513
实现的效果： 如上图所示为制作的标签页，我们想要实现的效果是当鼠标移到某一个标签的时候，在下面的内容区显示对应的内容，并且相应标签的颜色需要改变，如图中所示当前鼠标的位置在“标签1”上，则内容区域显示的内容为“我是内容1”，并且“标签1”的颜色要比“标签2”和“标签3”深一些，同样鼠标移到“标签2”和“标签3”的时候显示“我是内容2”和“我是内容3”。这样的效果是CSS和JS配合实现的。下面
js标签特效,js标签特效
12-04
js标签特效js标签特效js标签特效js标签特效js标签特效
用JS实现HTML标签替换效果
10-30
用JS实现HTML标签替换效果
基于JavaScript实现TAB标签效果
10-23
js实现tab标签效果，在项目中经常用到，今天抽点时间把我写的js实现tab标签效果源码分享给大家，对js tab标签代码需要的朋友参考下
JS实现标签页切换效果
10-19
主要为大家详细介绍了JS实现标签页切换效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
js简单实现标签云效果实例
10-23
本实例将介绍如何使用JavaScript简单地创建一个具有3D滚动效果的标签云，主要依赖于miaov.js库。 首先，我们要理解标签云的基本结构。HTML部分定义了一个ID为`div1`的容器，用于放置所有的标签链接。每个标签`<a>`...
JS添加标签效果
weixin_33720956的博客
04-11 191
JS添加标签效果   在豆瓣网上添加自己的标签是一种常见的效果，今天也就做了一个简单的demo。由于时间的问题 我不多原理，大家可以试着操作几遍就能明白其中的原理了。  JSFiddle的效果如下：  点击我看看效果！ 依赖于HTML结构如下： &lt;div class="j-container"&gt; &lt;div class="mb-meta"&gt; ...
JS标签页效果
03-27
这是实现标签页效果的代码示例，主要展示了两个功能。第一档鼠标放在标签上是，对应显示相应内容。第二当点击相应标签时内容区域装载不同页面。
原生js热门标签云球形仿flash动态效果演示页面
10-31
原生js热门标签云球形仿flash动态效果演示页面
实现贴标签功能
09-11
单间的贴标签功能，虽然挺丑，不过样式可以自己改改
整理用js实现tab标签页
qq_15150903的博客
04-19 711
首先是css样式，比如这样的： 1 &lt;style&gt; 2 *{ 3 margin:0; 4 padding: 0; 5 list-style: none; 6 font-size: 12px; 7 } 8 .notice{ 9 ...
js-tab标签效果
sevenbblythelulu的博客
05-13 597
项目工程 综合审计 通知公告 function setTab(name,cursel,n){ for(i=1;i   var menu=document.getElementById(name+i);//可不用                         menu.className=i==cursel?"c-current":"";/
JS代码：js样式改变特效、js特效组成部分、js标签放置位置、js放置类型
weixin_43731793的博客
07-17 183
1、js样式改变特效 <img src="/img/dog.png" id="dog"> </body> <script> dogobj=document.getElementById('dog'); dogobj.onmouseenter=function(){ this.style.background='#888'; this.style.bor...
js学习笔记——（15）jQuery选择器、样式操作、效果
qq_41860287的博客
04-27 258
1.jQuery选择器 1.1jQuery基础选择器 原生js获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。 $(‘选择器’) //里面选择器直接写css选择器即可，但是要加引号 1.2jQuery层级选择器 ...
基于VUE的ElementUi可视化表单设计器布局器
热门推荐
heye520的博客
09-27 3万+
码农苦码农懂！ 您是否有过以下想法： 我是一名element初学者，我想以最短的时间快速进入 element 的大门 我是一名后端工程师，虽能熟练掌握 JS 的写法，但是页面样式布局让我很头疼 我是一名创业者或者团队 Leader，如果能有一款软件降低团队或者我的开发门槛，提升效率和体验，就好了 我正在寻找一款能嵌入工作流，Sass,Pass 等系统的可视化 WEB 表单设计器，让用户自己通过我们...
cesium实现标签文字自动换行效果
最新发布
07-12
在 Cesium 中实现标签文字的自动换行效果，可以通过以下步骤进行： 1. 创建标签实例：使用 `Cesium.Label` 类创建一个标签实例，并设置相关的属性，如位置、文本内容、字体、最大宽度等。 ```javascript var label = new Cesium.Label({ position: Cesium.Cartesian3.fromDegrees(lon, lat, height), text: '这是一段很长的文本，需要自动换行显示', font: '14px sans-serif', maxWidth: 200 // 设置最大宽度，超过该宽度会自动换行 }); ``` 2. 自动换行设置：为了让标签文字自动换行，可以使用 Cesium 的实用工具类 `Cesium.LabelStyle` 中的 `fill` 属性，并设置 `wordWrap` 属性为 `true`。 ```javascript label.style = new Cesium.LabelStyle(); label.style.fill = new Cesium.Color(1, 1, 1, 1); // 设置标签文本颜色为白色 label.style.wordWrap = true; // 设置自动换行 ``` 3. 添加标签到场景：将标签添加到场景中，即可在三维场景中显示自动换行的标签文字。 ```javascript viewer.scene.primitives.add(label); ``` 通过以上步骤，你可以在 Cesium 中实现标签文字的自动换行效果。请注意，换行的位置是根据标签的最大宽度来自动计算的，如果文本内容超过最大宽度，会自动在合适的位置进行换行显示。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值