`
paulfzm
  • 浏览: 883089 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
文章分类
社区版块
存档分类
最新评论

3款 jquery tab

阅读更多

一、jQuery idTabs

idTabs 是 jQuery 的插件。它能非常容易的为网站添加选项卡,也为无穷尽的可能性敞开大门。

二、jQuery Tab

jQuery Tab 是 jQuery 的插件。它具有垂直滚动,水平滚动 ,点击触发,划过触发和自动切换等效果。

jQuery 部分:

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.tab.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("#testtab").tab({
    tabId:"#tabtag",    // 切换控制器的 ID
    tabTag:"li",        // 切换控制器标签
    conId:"#tabcon",    // 内容容器 ID
    conTag:".tabcon"    // 容器标签
    //auto:true,        // 自动切换
    //act:"click",      // 点击触发 也可以不设置 默认就为 click 设置为 mouseover 则为鼠标划过 
    //effact:"scrolly", // 效果为纵向滚动,横向滚动效果为 scrollx
    //dft:0,            // 设置起始显示序列
    //effact:"slow"     // "slow" 效果
  })
})
</script>

xhtml 部分:

<div id="testtab">
  <div id="tabtag">
    <ul>
      <li>项目一</li>
      <li>项目二</li>
      <li>项目三</li>
    </ul>
  </div>
  <div id="tabcon">
    <div class="tabcon"> 项目一内容 </div>
    <div class="tabcon"> 项目二内容 </div>
    <div class="tabcon"> 项目三内容 </div>
  </div>
</div>

三、jQuery tools tabs

jQuery tools tabs 它也是一款非常强大的 jQuery 选项卡插件。它也能非常容易的为网站添加选项卡,也为无穷尽的可能性敞开大门。

分享到:
评论

相关推荐

    jquery tab切换,jquery tab切换,jquery tab切换,jquery tab切换

    jquery tab切换,jquery tab切换,js点击按钮切换图片jquery tab切换,jquery tab切换,jquery tab切换,js点击按钮切换图片jquery tab切换,jquery tab切换,jquery tab切换,js点击按钮切换图片jquery tab切换,...

    jquery tab 的几个插件

    在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理以及动画制作等任务。...这三款jQuery Tab插件各有特点,可以根据项目特性和个人喜好进行选择,以实现高效且用户体验良好的Tab功能。

    jquery tab 切换页面 支持iframe

    3. **jQuery脚本**:编写jQuery脚本来处理Tab的切换事件。当用户点击导航项时,隐藏当前显示的`iframe`,显示新的`iframe`。 ```javascript $(document).ready(function() { $('.tabs li').click(function() { ...

    jquery tab插件

    使用jq写的关于tab切换的插件,使用面向对象组件化开发

    jquery版tab页

    &lt;div id="tab3" class="tab-content"&gt;Content for Tab 3 ``` 2. **CSS样式**:通过CSS我们可以为Tab页添加样式,如背景颜色、边框、字体等,以及隐藏除第一个tab之外的所有内容面板。 ```css .tabs { /* 样式设置...

    jQuery TAB插件

    3. **DOM操作**:`.show()`和`.hide()`是jQuery中用于显示或隐藏元素的关键方法。在选项卡设计中,通过这两个方法可以实现内容区域的切换,即当某个选项卡被选中时,相应的内容区域显示,其他则隐藏。 4. **数据回...

    jquery tab 切换

    &lt;li&gt;&lt;a href="#tab3"&gt;Tab 3&lt;/a&gt;&lt;/li&gt; &lt;div class="tab-content"&gt; &lt;div id="tab1" class="tab active"&gt;Content for Tab 1 &lt;div id="tab2" class="tab"&gt;Content for Tab 2 &lt;div id="tab3" class="tab"&gt;Content ...

    jquery tab插件(共七个)

    而jQuery Tab插件则是jQuery库中的一种常见组件,用于创建功能丰富的标签页式界面。这些插件通常包含一系列可切换的面板,每个面板代表一个独立的内容区域,用户可以通过点击不同的标签来切换显示的内容。 标题...

    JQuery Tab 效果

    3. **事件监听**:JQuery的`click`事件用于监听用户点击行为,当用户点击某个Tab标题时,触发相应的内容切换。例如,`$(".tabTitle").click(function() {...})`可以监听所有类名为`tabTitle`的元素的点击事件。 4. ...

    可多次使用的jQuery tab选项卡插件.zip

    jQuery Tab选项卡插件是一种广泛应用于网页开发中的交互式组件,它允许用户通过多个标签页来组织和切换内容。在本案例中,"可多次使用的jQuery tab选项卡插件.zip"是一个包含资源的压缩包,提供了可以重复利用的...

    Jquery Tab标签例子,js代码有备注

    &lt;li&gt;&lt;a href="#tab3"&gt;标签页3&lt;/a&gt;&lt;/li&gt; &lt;div id="tab1"&gt;内容区域1 &lt;div id="tab2" class="hidden"&gt;内容区域2 &lt;div id="tab3" class="hidden"&gt;内容区域3 ``` 2. **CSS样式**: 使用CSS来控制Tab的外观和...

    Jquery实现tab菜单

    &lt;div id="tab3" class="tab-content"&gt;Content for Tab 3 ``` 三、CSS样式 在`163css`文件中,我们可以为tab菜单添加一些基础样式,使其看起来更加美观: ```css .tabs { /* Add some styles for the container *...

    idTabs v3.0 简单易用的jQuery的Tab插件

    idTabs是一款基于jQuery库的轻量级Tab切换插件,其设计目标是提供一个简单、易用且功能齐全的解决方案,用于在网页中创建Tab式布局。这个插件以其直观的API和良好的浏览器兼容性而受到开发者的青睐。在本文中,我们...

    jquery渐变切换tab标签

    3. **jQuery初始化**:在页面加载完成后,使用`$(document).ready()`函数来初始化Tab切换功能。这通常包括隐藏所有内容区域,只显示第一个内容,以及添加点击事件监听器到每个Tab标题。 4. **事件处理**:当用户...

    jQuery Tab标签插件

    jQuery Tab标签插件是一种常用的前端开发工具,它允许开发者轻松地在网页中实现美观且功能丰富的标签页切换效果。这个插件基于JavaScript库jQuery构建,它简化了HTML、CSS和JavaScript之间的交互,使得即便是初学者...

    jQuery tab选项卡切换插件和css3属性结合动画选项卡切...

    &lt;div id="tab3" class="tab-content hidden"&gt;内容3 ``` CSS样式方面,我们需要设置基本的布局和隐藏未选中的内容。`hidden`类可以用来隐藏内容区域,然后在jQuery中通过添加和移除这个类来控制显示和隐藏。 ```...

    jQuery tab标签列表.zip

    本项目“jQuery tab标签列表.zip”聚焦于利用jQuery实现一个功能丰富的选项卡(Tab)切换效果。 选项卡(Tab)界面是网页布局中常见的一种设计模式,它将大量内容组织成多个独立的部分,通过点击不同的标签来显示...

    jquery 图片导航 图片tab image tab 菜单 jquery image tab 不要用ie查看

    jquery 图片导航 图片tab image tab 菜单 jquery image tab 不要用ie查看jquery 图片导航 图片tab image tab 菜单 jquery image tab 不要用ie查看

    jquery tab选项卡插件 轻量级tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等功能

    jQuery Tab 插件就是一种轻量级的解决方案,能够帮助开发者轻松实现多种交互功能,如鼠标滑过、点击切换、自动切换以及数据回调。本插件特别适合那些希望提升用户体验并简化页面布局的网站开发者。 首先,让我们...

    jQuery TAB文字列表自动切换.zip

    本资源“jQuery TAB文字列表自动切换.zip”提供了一种实现动态选项卡(Tab)切换的解决方案,特别适用于首页内容展示,能够让用户在有限的空间内查看到更多的信息。 选项卡(Tab)界面是网页设计中常见的交互元素,...

Global site tag (gtag.js) - Google Analytics