`

tab 的简单实现原理

 
阅读更多

你可以将div中的内容设置为table 或者内嵌入其它div ==

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 </HEAD>
 <BODY>
 <input type="button" value="div1" id="tab1" onclick="changeDiv(this)" />
 <input type="button" value="div2" id="tab2" onclick="changeDiv(this)" />
 <table>
  <tr>
   <td>
    <div id="div_tab1" style="border: 1px solid #0099CC;">
     </br>
     tab1 is chosed
     </br>
    </div>
    <div id="div_tab2" style="display:none;border: 1px solid #0099CC;">
     </br>
     tab2 is chosed
     </br>
    </div>
   </td>
  </tr>
 </table>


 </BODY>
 <script language="javascript">
 function changeDiv(obj){
 // alert(obj.id);
  div_tab1.style.display="none";
  div_tab2.style.display="none";
  var tid = document.getElementById('div_'+obj.id);
 // alert(tid);
  tid.style.display="";
  
 }
 </script>
</HTML>

分享到：
| 内部类的使用示例
评论
发表评论

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

相关推荐

    Web开发中Tab页的简单实现

    本篇文章将详细介绍如何在Web开发中实现简单的Tab页功能。 首先，我们需要了解Tab页的基本结构。一个Tab页通常由两部分组成：Tab导航条和内容区域。Tab导航条显示各个Tab的标签，而内容区域则根据用户选择的Tab展示...

    jQuery实现简单tab切换

    首先，我们需要理解Tab切换的基本原理。Tab切换通常涉及一组隐藏或显示的内容区域，每个区域对应一个可点击的Tab按钮。当用户点击某个Tab时，相应的内容区域会显示，而其他区域则隐藏。这种设计模式有助于组织大量...

    tab栏切换原理

    为了深入理解tab栏切换的原理，本文将对其基本概念、实现原理以及常用方法进行详细解读。 首先，tab栏切换的原理涉及用户界面的布局和交互设计。它主要由两个部分构成：交互按钮（tab按钮）和对应的内容区块。用户...

    有ajax，jquery实现tab效果

    在网页设计中，Tab效果是一种常见的用户界面设计模式，它允许用户...总的来说，Ajax和jQuery的结合使得创建交互性强、用户体验良好的Tab效果变得简单。通过熟悉这些技术和实践，开发者可以提升网站的动态性和用户体验。

    javascript实现简易的tab选项卡切换效果

    以上就是使用JavaScript实现简易选项卡切换效果的基本步骤。这个例子虽然简单，但足以满足大多数基本需求。通过进一步的定制，可以添加更多的动画效果、键盘导航支持等高级功能，以提高用户体验。在实际开发中，你还...

    同一页面多个Tab选项卡嵌套显示实例

    下面我们将详细探讨Tab选项卡的实现原理、设计原则以及如何创建嵌套的Tab选项卡。 一、Tab选项卡的实现原理 1. HTML基础：Tab选项卡的基本结构通常由HTML的`&lt;div&gt;`、`&lt;ul&gt;`和`&lt;li&gt;`等标签构建。每个Tab是一个`&lt;li&gt;`...

    经典且简单的tab切换，示例教程 ，绝对经典

    本教程将介绍一个经典且简单的Tab切换实现，适合初学者学习，同时也适用于有一定经验的开发者寻找可以直接使用的代码模板。 首先，Tab切换的基本原理是通过HTML结构、CSS样式和JavaScript来实现。在HTML中，我们...

    简单的Tab

    在IT行业中，"简单的Tab"这个标题可能是指一个关于用户界面（UI）设计或编程的话题，特别是涉及到在软件或网页中实现多标签功能。Tab控件通常用于组织和切换不同的内容区域，使得用户能在一个简洁的界面上访问多个...

    src.DialogTabs_impl(对话框内属性Tab页实现例子)

    3. **简单Tab Example (src.simple_TabExample(VC6).rar)** - 这个示例可能演示了如何在VC6环境中创建一个基本的Tab Control，包括初始化、添加Tab页以及响应用户交互。 - 可能包含了如何自定义Tab页的外观，例如...

    Tab页 代码简洁

    现在，让我们深入探讨一下Tab页的实现原理以及如何利用JS来创建一个高效且简洁的Tab系统。 首先，HTML结构是Tab页的基础。通常，我们会创建一组包含各个Tab标题的`&lt;div&gt;`元素，以及与这些标题相对应的内容区域。...

    javascript的tab切换原理与效果实现方法

    这个简单的 Tab 切换效果实现了用户悬停在不同 `&lt;li&gt;` 上时，对应的段落内容显示或隐藏。然而，实际应用中，我们可能需要考虑更多细节，例如添加动画效果、处理键盘事件、支持触屏设备等。为了提高用户体验，还可以...

    js实现Tab标签切换

    JavaScript（简称JS）是一种广泛用于网页和网络应用的编程...以上就是使用JavaScript实现Tab标签切换的基本原理和实现方法。理解这些核心概念后，你可以根据实际需求进行定制和扩展，以满足各种复杂的网页交互需求。

    tab 标签切换效果网页特效

    本文将深入探讨Tab标签切换效果的原理、实现方式以及优化策略。 一、Tab标签切换效果原理 Tab标签切换效果基于HTML、CSS和JavaScript（或其框架如jQuery）三者结合。HTML用于创建结构化的标签和内容容器，CSS负责...

    web中tab菜单

    下面是一个简单的HTML和CSS实现Tab菜单的例子： ```html &lt;div class="tab-container"&gt; &lt;li&gt;&lt;a href="#" data-tab="tab1"&gt;Tab 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" data-tab="tab2"&gt;Tab 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#" ...

    tab切换自定义效果，已测试，加入JS插件中即可用

    ### 知识点三：Tab切换实现原理 #### HTML结构 ```html &lt;div class="moving_bg"&gt;&nbsp; &lt;span class="tab_item"&gt;标签1 &lt;span class="tab_item"&gt;标签2 &lt;span class="tab_item"&gt;标签3 &lt;span class="tab_item...

    ajax-tab(动态加载tab) 切换

    jQuery简化了DOM操作和Ajax请求，使得实现Ajax-tab更加简单。以下是一个基本的示例： ```javascript $(document).ready(function() { $('.tab a').click(function(e) { e.preventDefault(); var target = $(this...

    TAB带动画效果

    1. CSS3动画：利用CSS3的`transition`和`animation`属性可以实现简单的动画效果。例如，可以设置不同的`transform`属性（如`translateX`或`scale`）来实现Tab的平移和缩放动画。 2. JavaScript/jQuery：对于更复杂...

    Fragment实现app Tab主页

    以下是一个简单的实现步骤： 1. **创建Fragment类**：针对每个Tab，创建一个对应的Fragment类，继承自`androidx.fragment.app.Fragment`。 2. **设置TabLayout和ViewPager**：在主活动中，使用`TabLayout`和`...

    tab菜单切换 可以让你简单实现菜单切换功能你自己下以下载

    本教程将详细讲解如何实现Tab菜单切换功能，并提供相关的源码供下载。 首先，让我们了解Tab菜单的基本概念。Tab菜单通常由一组按钮或标签组成，每个按钮或标签对应一个内容区域。当用户点击某个按钮时，相应的内容...

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