`
sj972
  • 浏览: 14427 次
  • 性别: Icon_minigender_1
  • 来自: 上海
最近访客 更多访客>>
社区版块
存档分类
最新评论

一个TAB页的简单JS实现

JavaScriptCSSHTML 
阅读更多
请看下面的代码吧，比较简单。
 
  1. <html>  
  2. <head>  
  3.     <title>一个TAB页的简单JS实现</title>  
  4.     <style type="text/css">  
  5.     #div0{  
  6.         width:300px;  
  7.         margin:0 auto;  
  8.     }  
  9.     #div1{  
  10.         border:1px solid blue;  
  11.         border-bottom:0px solid blue;  
  12.         float:left;  
  13.     }  
  14.     #div2{  
  15.         border-right:1px solid blue;  
  16.         border-top:1px solid blue;  
  17.         float:left;  
  18.     }  
  19.     #div3{  
  20.         border:1px solid blue;  
  21.         clear:left;  
  22.     }  
  23.     #div4{  
  24.         border:1px solid blue;  
  25.         clear:left;  
  26.     }  
  27. </style>  
  28. <script language="javascript">  
  29. window.onload=function(){  
  30. document.getElementById("div1").style.backgroundColor="yellow";  
  31. document.getElementById("div4").style.display="none";  
  32. }  
  33. function foo(){  
  34. document.getElementById("div1").style.backgroundColor="yellow";  
  35. document.getElementById("div2").style.backgroundColor="";  
  36. document.getElementById("div3").style.display="none";  
  37. document.getElementById("div4").style.display="block";  
  38. }  
  39. function bar(){  
  40. document.getElementById("div1").style.backgroundColor="";  
  41. document.getElementById("div2").style.backgroundColor="yellow";  
  42. document.getElementById("div3").style.display="block";  
  43. document.getElementById("div4").style.display="none";  
  44. }  
  45. </script>  
  46. </head>  
  47. <body>  
  48.     <div id="div0">  
  49.         <div id="div1" onmouseover="foo()">Hello</div>  
  50.         <div id="div2" onmouseover="bar()">world</div>  
  51.         <div id="div3">Jason周五能中500万</div>  
  52.         <div id="div4">Jason有个好老婆</div>  
  53.     </div>  
  54. </body>  
  55. </html>  
分享到：
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    tab页的实现方法 实现tab

    - 文件`JspGoodTag.rar`可能包含一个JSP标签库，提供了方便快捷创建Tab页的功能。导入到项目中，通过特定的标签语法，可以在JSP页面中轻松创建和管理Tab。 - 文件`MyPlugins_fix_0_1.zip`可能是针对某个前端框架...

    基于vue多tab页实现

    在Vue.js框架中，多标签页（Tab）的实现是一个常见的需求，特别是在构建复杂的Web应用时，它能够帮助用户组织和切换不同的视图或功能。本教程将详细讲解如何使用Vue.js来创建一个简单的多标签页系统，并提供了一个...

    JavaScript实现tab栏切换效果

    总的来说，这个示例展示了如何使用基础的 HTML、CSS 和 JavaScript 技术实现一个 Tab 切换效果。通过对元素的选择、操作和事件监听，我们可以创建出交互性强、用户体验良好的网页组件。同时，这种实现方式也便于扩展...

    Web开发中Tab页的简单实现

    在Web开发中，Tab页是一种常见的用户界面元素，它用于将大量内容组织成多个独立的区域，每个区域对应一个Tab，用户可以通过点击不同的Tab切换显示的内容。这种设计既节省了空间，又提高了用户体验，因为用户可以更...

    简单的一个js的tab页签

    本示例是关于如何使用JavaScript（简称js）来创建一个简单的Tab页签功能。我们将深入探讨这个话题，了解其背后的原理和实现方法。 首先，Tab页签的基本结构通常包括HTML、CSS和JavaScript三部分。HTML负责布局和...

    JS可关闭tab 实用

    本文将深入探讨如何使用JavaScript实现浏览器标签页的关闭功能，这对于提升用户体验和网页交互性具有重要意义。 首先，理解浏览器环境下的JavaScript限制是至关重要的。由于安全原因，JavaScript不能直接关闭当前...

    用js写的以图片为背景的Tab实现

    以下是一个简单的JavaScript实现： ```javascript document.querySelectorAll('.tab').forEach(tab =&gt; { tab.addEventListener('click', function(e) { e.preventDefault(); // 阻止默认的链接跳转行为 // 移除...

    Jquery实现tab页选项卡

    jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务，因此是实现Tab页功能的理想选择。本教程将详细介绍如何使用jQuery来创建一个简单的Tab页选项卡。 首先，我们需要在...

    js简单实现tab滚动方法

    本教程将基于提供的`tab2011.css`和`tab2011.js`文件，探讨如何通过JavaScript实现一个简单的Tab滚动方法。 首先，`tab2011.css`文件通常包含样式规则，用于定义Tab导航条以及内容区域的布局和样式。例如，它可能...

    Tab页 代码简洁

    标题“Tab页 代码简洁”表明我们将讨论一个关于实现简洁美观Tab页的编程实践，特别是使用简洁的JS（JavaScript）代码。这种简洁的代码实现对于开发者来说，意味着易于理解和维护，同时也方便快速集成到项目中。 ...

    js实现tab切换

    在本示例中，我们将探讨如何使用JavaScript实现一个基本的Tab切换效果，这是一种常见的用户界面设计元素，用于在有限的空间内展示多个视图或内容板块。 首先，我们需要创建HTML结构来定义Tab导航和对应的内容区域。...

    【JavaScript源代码】JavaScript实现简易tab栏切换案例.docx

    总的来说，通过使用 JavaScript 和 CSS，我们可以轻松实现一个功能完备的 tab 切换效果。这种效果不仅提高了用户体验，也为网页设计提供了更多的交互可能性。在实际开发中，还可以考虑使用库如 jQuery 或 Vue.js 等...

    Asp.net2.0实现简易菜单Tab切换

    通过以上步骤，你可以在Asp.net 2.0环境中轻松实现一个简易的菜单Tab切换功能。这个功能对于提升网站的用户体验有着显著的作用，同时也能帮助开发者更好地组织和展示Web应用程序的内容。在实际开发过程中，还可以...

    简单纯js实现网页tab选项卡切换效果

    至此，一个简单的纯JavaScript实现的网页选项卡切换效果就完成了。这种实现方式不仅适用于静态网页，也可以应用于动态加载的内容，只需要稍作调整即可。通过这样的实践，你可以更好地理解DOM操作、事件监听以及CSS...

    js实现tab菜单效果

    本文将详细介绍如何使用JavaScript（JS）原生代码实现一个基本的Tab菜单效果。 首先，我们需要理解Tab菜单的基本结构。通常，Tab菜单由两部分组成：一个是可见的选项卡（tab），用户可以通过点击它们来选择；另一个...

    使用HTML＋CSS编写一个灵活的Tab页

    Tab页通常由两部分组成：一个是包含各个选项卡的容器，另一个是显示内容的区域。我们可以使用`&lt;ul&gt;`和`&lt;li&gt;`元素来创建选项卡，用`&lt;div&gt;`元素来包裹内容。以下是一个基本的HTML框架： ```html &lt;li&gt;&lt;a href="#...

    layui点击导航栏刷新tab页的示例代码

    Layui的tab组件是该框架中非常实用的一个组件，它允许开发者在页面上创建多个可切换的标签页。然而，Layui的tab组件默认情况下在切换标签页时并不会刷新内容，有时这种默认行为并不满足开发者的实际需求，比如在某些...

    h5实现移动端横向滚动tab，并响应内容

    一个简单的Tab布局可以由一个包含多个`&lt;div&gt;`的容器组成，每个`&lt;div&gt;`代表一个Tab。我们可以使用CSS的`display: flex`属性来实现水平排列，同时通过`overflow-x: auto`来启用横向滚动。`&lt;div&gt;`内部则包含相应Tab的...

    利用jquery作的tab页

    通常，一个tab页由一组可切换的面板（每个面板包含不同的内容）和对应的导航按钮组成。当用户点击某个导航按钮时，对应的面板会被显示，其他面板则被隐藏。以下是一段简单的jQuery代码示例，展示了如何实现这一功能...

    jQuery实现简单tab切换

    本示例将探讨如何利用jQuery实现一个基本的Tab切换功能，这对于创建交互式用户界面至关重要。 首先，我们需要理解Tab切换的基本原理。Tab切换通常涉及一组隐藏或显示的内容区域，每个区域对应一个可点击的Tab按钮。...

Magicbox
Global site tag (gtag.js) - Google Analytics