javascript DOM getElementByTagName Tab选项卡

最新推荐文章于 2024-09-07 13:38:28 发布
最新推荐文章于 2024-09-07 13:38:28 发布
阅读量124 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/ybbqg/archive/2012/05/25/2518166.html
版权 
<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>getElementByTagName  Tab选项卡</title>
        <style type="text/css">
            ul{
                margin:0; 
                padding:0; 
                list-style:none; 
            }
            #tab{
                width:400px; 
                height:300px
            }
            #tab_nav{
                height:25px; 
                line-height:25px; 
                width:100%; 
                overflow:hidden; 
            }
            #tab_nav h3{
                margin:0; 
                padding:0; 
                width:80px; 
                background:#ccc; 
                line-height:25px; 
                text-align:center; 
                float:left; 
                border:2px solid white; 
                color:white; 
            }
            #tab_nav h3.hot{
                border:2px solid #888; 
                background:#888; 
            }
            #tab_content {
                width:100%; 
                height:175px; 
                background:#888; 
            }
            
            #tab_content ul {
                display:none; 
            }
            #tab_content ul.hot{
                display:block; 
            }

        </style>
    </head>
    <body>
        <div id="tab">
            <div id="tab_nav">
                <h3 οnmοuseοver="switchTab(0)" class="hot">选项卡1</h3>
                <h3 οnmοuseοver="switchTab(1)">选项卡2</h3>
                <h3 οnmοuseοver="switchTab(2)">选项卡3</h3>
                <h3 οnmοuseοver="switchTab(3)">选项卡4</h3>
            </div>

            <div id="tab_content">
                <ul class="hot">
                    <li>内容1</li>
                    <li>内容1</li>
                </ul>
                <ul>
                    <li>内容2</li>
                    <li>内容2</li>
                </ul>
                <ul>
                    <li>内容3</li>
                    <li>内容3</li>
                </ul>
                <ul>
                    <li>内容4</li>
                    <li>内容4</li>
                </ul>
            </div>
        </div>
        <script type="text/javascript">
            var h3os = document.getElementsByTagName('h3'); 
            var ulos = document.getElementById('tab_content').getElementsByTagName('ul'); 
            function switchTab(num){
                for(var i=0; i< h3os.length;  i++){
                    if (i == num){
                        h3os[i].className = 'hot'; 
                        ulos[i].style.display = 'block'; 
                    } else {
                        h3os[i].className = ''; 
                        ulos[i].style.display = 'none'; 
                    }
                }
            }
        </script>
    </body>
</html>

 

转载于:https://www.cnblogs.com/ybbqg/archive/2012/05/25/2518166.html

Mr.Gu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JS DOM之getElementsByClassName
SkullSky的博客
03-13 1207
实现代码：function getElementsByClassName(parent,tagName,className){ var aEls = parent.getElementsByTagName(tagName); var arr = []; for(var i=0; i<aEls.length; i++){ var aClassName = aEls[i
JavaScript DOM操作详解
brokyz
06-22 1157
本文将是我在学习DOM操作时的笔记
DOM编程 和 tab选项卡（6）
weixin_34192816的博客
01-14 185
1.基本概念DOM: Document 整篇文档 Object 文档对象 Model 模型 这里有个Dom树DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型”（Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如增删内容）。浏览器会根据 DOM 模型，将结构化文档（比如 HTML 和 XML）解析...
关于js的document.getElementByTagName的一些玩意
m0_64288219的博客
06-09 3432
就是我怎么点安装按钮，son元素的蓝条的宽度就是没有改变，当时我百思不得其解。 我首先怀疑没有获取btn元素，但通过控制台输出btn,可以看出是获得的。 也就是这匆匆一瞥，让我错过了正确答案。 通过图片可以看出，getElementsByTagName返回是数组集合形式。 所以我们只需加上btn[0].onclick=functin(){}即可当时我还试着给button加上id,通过getElementsById来调用，测试可行。我还以为系统出了bug，心想以后要少用getElementsByTagNam
document.all 用法
08-26 1997
使用document.all注意的地方 代码1: 复制代码 代码如下:代码2： 但是常常name可以相同(如:用checkbox取用户的多项爱好的情况) 复制代码 代码如下:
HTML DOM getElementsByTagName() 方法
04-13 815
定义和用法 getElementsByTagName() 方法可返回带有指定标签名的对象的集合。 语法 document.getElementsByTagName(tagname) 说明 getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。 如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法，它将返回文档中所有元素...
JavaScript中getElementById,getElementsByTagNam和getElementsByClassName的区别与用法
热门推荐
丶坏孩子的博客
01-16 2万+
  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术：Adobe Dreamweaver CC 2017，JavaScript 作者：袁志彤 撰写时间：2019-01-16 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~...
javascript getElementByTagName的使用
10-29
`getElementByTagName`是JavaScript进行DOM操作时的一个强大工具，它允许开发者对页面上的特定元素集合进行操作，从而实现丰富的用户体验。在实际开发中，这样的技巧常用于创建响应式和动态的网页应用。
浅谈javascript中的DOM方法
01-19
　2)element.getElementByTagName(tag);通过标签名来获取; 　3)element.getElementByClassName(class);通过属性类名来获取; 2:属性的set和get方法. 　1)object.getAttribute(attribute);获取元素的属性.===>>>...
JavaScript DOM 操作(2)
与梦同行的博客
05-03 328
JavaScript 入门到精通之路---DOM 操作insertAdjancentHTML，replaceWith，replaceChild，live node，static node， attribute vs property， clone
getElementById获取元素
leechoy
06-12 4650
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>D.
32. Element tabIndex 属性
enlyhua的专栏
08-06 2749
定义和用法tabIndex 属性设置或返回元素的 tab 键控制次序。 语法HTMLElementObject.tabIndex=tabIndex实例改变三个链接的 tab 次序：<html> <head> <script> function changeTabIndex() { document.getElementById('1').tabIndex="3" docum
WHAT - React 函数与 useMemo vs useCallback
weixin_58540586的博客
09-03 936
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
在 Vue 中实现跨项目数据传递
世轩的博客
09-03 1411
需要注意的是，跨项目数据传递可能会带来一些安全和数据一致性的问题。在实际应用中，要根据具体情况选择合适的方法，并确保数据的安全性和可靠性。同时，对于敏感数据，应该采取加密等安全措施。
Module “console“ has been externalized for browser compatibility.
最新发布
Alvin的博客
09-07 95
在 Vue 3.5.3 中使用 Vite 作为构建工具时，如果你尝试直接从。模块外部化了，这意味着它不会在客户端环境中暴露。去除导入 error 函数的代码。函数，会遇到一个错误，提示。这是因为 Vite 默认将。Vue 3.5.3 中。
基于JavaWeb开发的JavaSpringboot+Vue实现前后端分离房屋租赁系统
央顺科技官方博客
09-05 489
2021年处于信息科技高速发展的大背景之下。在今天，缺少手机和电脑几乎已经成为不可能的事情，人们生活中已经难以离开手机和电脑。针对增加的成本管理和操作,各大商家非常有必要建立自己的网上房屋租赁平台系统，这既可以让更多的人体验到网络所带来的方便，也有助于提高房屋的租赁。在经过几十年的高速发展后，互联网已成为最流行、最普及的媒体，每天的信息流量甚至能比得上过去十年。其以便捷的信息交换、快速的沟通速度，悄然地改变着会员的消费方式。
npm 安装electron网络问题报错解决
weixin_59685936的博客
09-05 1120
npm 安装electron网络问题报错解决
Nginx部署前端Vue项目
不会代码的小林
09-03 1324
Nginx是一款轻量级的高性能Web服务器，可以用于静态文件的托管和反向代理等场景。现在，您可以在浏览器中访问http://example.com（请替换为您自己的域名），应该可以看到Vue应用程序正在运行。请将example.com替换为您自己的域名，将/var/www/my-project/dist替换为Vue项目的dist目录的实际路径。现在，我们需要配置Nginx来托管Vue项目的静态文件。接下来，我们可以使用Vue CLI创建一个新的Vue项目。在部署之前，我们需要先构建Vue项目。
JavaScript调试技巧与性能优化
例如，将`getElementsByTagName()`误写成`getElementByTagName()`，或者将变量名`PhotoAlbum`误拼为`PhotoAblum`。这类错误可以通过使用支持语法高亮的编辑器，如Dreamweaver，来辅助发现。但未声明的变量或拼写相近...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值