<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<html>
<head>
<title>wid.html</title>
<link rel="stylesheet" href="./plugin/Travel_tab/css/webwidget_scroller_tab.css" type="text/css" />
<script type='text/javascript' src='./js/jquery-1.7.1.js'></script>
<script type='text/javascript' src='./plugin/Travel_tab/js/webwidget_scroller_tab.js'></script>
<script type="text/javascript">
$(function() {
$(".webwidget_scroller_tab").webwidget_scroller_tab({
scroller_time_interval: '5000',
scroller_window_padding: '10',
scroller_window_width: '1280',
scroller_window_height: '730',
scroller_head_text_color: '#fff',
scroller_head_current_text_color: '#000',
directory: 'images'
});
$(".webwidget_scroller_tab1").webwidget_scroller_tab({
scroller_time_interval: '5000',
scroller_window_padding: '10',
scroller_window_width: '1280',
scroller_window_height: '730',
scroller_head_text_color: '#fff',
scroller_head_current_text_color: '#000',
directory: 'images'
});
});
</script>
</head>
<body>
<div class="webwidget_scroller_tab">
<div class="tabContainer">
<ul class="tabHead">
<li class="currentBtn"><a>NUM1</a></li>
<li><a>NUM2</a></li>
<li><a>NUM3</a></li>
</ul>
</div>
<div class="tabBody">
<ul>
<li class="tabCot">
<div class="webwidget_scroller_tab1">
<div class="tabContainer">
<ul class="tabHead">
<li class="currentBtn"><a>NUM11</a></li>
<li><a>NUM12</a></li>
<li><a>NUM13</a></li>
</ul>
</div>
<div class="tabBody">
<ul>
<li class="tabCot">11</li>
<li class="tabCot">12</li>
<li class="tabCot">13</li>
</ul>
</div>
</div>
</li>
<li class="tabCot">2</li>
<li class="tabCot">3</li>
</ul>
</div>
</div>
</body>
</html>
分享到：
相关推荐
本篇文章将深入探讨如何使用JQuery实现Tab切换效果。 首先，我们需要理解Tab切换的基本结构。通常，Tab切换包含两个主要部分：Tab头（表示各个选项）和Tab内容（与Tab头对应的显示区域）。当用户点击某个Tab头时，...
jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理和动画效果，使得实现Tab切换功能变得更加简单。下面我们将详细讨论如何使用jQuery实现Tab切换功能。 首先，我们需要在HTML中构建Tab的结构。一个...
在这个“jquery tab 切换”的主题中，我们将深入探讨如何使用jQuery实现Tab切换效果，并结合HTML和CSS创建一个功能完整的Tab组件。 首先，jQuery库提供了丰富的DOM操作、事件处理和动画效果，使得创建Tab切换变得...
接下来，我们引入JQuery库，并添加CSS样式来美化我们的Tab切换效果。JQuery库可以通过CDN链接或本地文件引入，例如： ```html <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> ``` CSS样式...
"jQuery 通用Tab切换效果"就是利用jQuery这个强大的JavaScript库实现的一种高效且灵活的Tab组件。jQuery简化了DOM操作，使得创建这种效果变得简单易行。 首先，jQuery的核心在于它的选择器，它可以方便地选取HTML...
jQuery实现的tab标签自动切换效果
标题中的“jquery tab 切换效果”指的是利用 jQuery 实现的一种页面组件，它允许用户在不同的内容面板间切换，通常以标签页的形式呈现。这些标签页可以是文字标题或自定义的HTML元素，而每个标签页后面隐藏着对应的...
在这个"很漂亮的jquery+css Tab切换效果"项目中，我们将深入探讨如何利用jQuery和CSS来创建这种效果，并自定义其动画和样式。 首先，jQuery是一个轻量级的JavaScript库，它简化了JavaScript的DOM操作、事件处理、...
本文实例讲述了jQuery实现的tab标签切换效果。分享给大家供大家参考，具体如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...
本示例将探讨如何利用jQuery实现一个基本的Tab切换功能，这对于创建交互式用户界面至关重要。 首先，我们需要理解Tab切换的基本原理。Tab切换通常涉及一组隐藏或显示的内容区域，每个区域对应一个可点击的Tab按钮。...
在实现TAB切换效果时，CSS主要负责以下几点： 1. **样式布局**：通过设置display属性，我们可以控制TAB按钮和内容区域的显示与隐藏。默认情况下，除了第一个TAB的内容外，其他内容都是隐藏的。当用户点击不同的TAB...
本示例“jQuery带tab切换搜索框样式代码”是关于如何利用jQuery实现一个功能丰富的搜索框，该搜索框集成了选项卡切换功能，为用户提供更便捷的交互体验。以下是对这个主题的详细讲解： 1. **jQuery基础**：首先，...
下面是一个基本的jQuery+CSS Tab切换效果实现步骤： 1. **HTML结构**：创建Tab按钮和对应的内容区。每个Tab按钮对应一个内容区，初始状态所有内容区应被隐藏，只有一个默认显示。 ```html <li><a href="#tab1...
好久没有出tab切换效果 并非是懒人站长真的懒了，而是tab切换，特别是jQuery版本的，无论是点击，还是鼠标悬停，其代码原理是一致的 多发版本无非是浪费大家的时间，而且还会扰乱大家选择的视线 ...
在实际开发中，需要考虑到不同浏览器的兼容性问题，确保Tab切换效果在主流浏览器上都能正常工作。此外，为了保证用户交互的流畅性，应该注意避免因频繁的操作DOM或执行过重的JavaScript而导致的性能问题。在大量...
在网页设计中，Tab效果是一种常见的用户界面设计模式，它允许用户通过点击不同的标签来切换显示不同的内容区域。Ajax（Asynchronous JavaScript and XML）和jQuery是实现这种效果的常用技术。Ajax可以实现页面的异步...
本篇文章将详细探讨基于jQuery编写的Tab切换插件，以及如何实现点击切换和悬浮切换效果。 首先，jQuery是一个强大的JavaScript库，它简化了DOM操作、事件处理和动画制作等任务。在实现Tab切换功能时，jQuery提供了...
在本教程中，我们将深入探讨如何使用jQuery实现这种渐变切换效果，以及它与其他Tab标签的区别。 首先，让我们理解jQuery是什么。jQuery是一个轻量级的JavaScript库，它简化了HTML文档遍历、事件处理、动画和Ajax...
本示例中的"jquery金属质感上下折叠tab切换效果"是利用jQuery实现的一种视觉效果，旨在提升用户体验，使网页的导航更加直观和吸引人。 这个效果的核心在于模拟金属质感的外观，以及实现tab的上下折叠动画。金属质感...