`

一个选项卡切换的例子

选项卡切换 
阅读更多

function nTabs(thisObj, Num) {
              if (thisObj.className == "active") return;
              var tabObj = thisObj.parentNode.id;
              var tabList = document.getElementById(tabObj).getElementsByTagName("li");
              for (i = 0; i < tabList.length; i++) {
                  if (i == Num) {
                      thisObj.className = "active";
                      document.getElementById(tabObj + "_Content" + i).style.display = "block";
                  } else {
                      tabList[i].className = "normal";
                      document.getElementById(tabObj + "_Content" + i).style.display = "none";
                  }
              }
          }

 

 

 

html部分：

<div class="novel-top">
    <div>
     <div class="top_nav">
      <ul id="novel_myTab1">
       <li class="active" onmouseover="nTabs(this,0);"><a
        href="javascript:void(0)" onfocus="this.blur();"><span>全部</span>
       </a>
       </li>
       <li class="normal" onmouseover="nTabs(this,1);"><a
        href="javascript:void(0)" onfocus="this.blur();"><span>小说阅读</span>
       </a>
       </li>
       <li class="normal" onmouseover="nTabs(this,2);"><a
        href="javascript:void(0)" onfocus="this.blur();"><span>杂志阅读</span>
       </a>
       </li>
      </ul>
     </div>
     <div id="novel_myTab1_Content0">
      <p class="p_red">排行榜前10</p>
      <ul class="top_bg">
       <li class="gay_link"><span class="text-top">01</span><a
        href=""><img src="res/images/m_1.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">02</span><a
        href=""><img src="res/images/m_1.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="gay_link"><span class="text-top">03</span><a
        href=""><img src="res/images/m_1.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">04</span><a
        href=""><img src="res/images/m_1.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="gay_link"><span class="text-top">05</span><a
        href=""><img src="res/images/m_1.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">06</span><a
        href=""><img src="res/images/m_1.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="gay_link"><span class="text-top">07</span><a
        href=""><img src="res/images/m_1.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">08</span><a
        href=""><img src="res/images/m_1.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="gay_link"><span class="text-top">09</span><a
        href=""><img src="res/images/m_1.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">10</span><a
        href=""><img src="res/images/m_1.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
      </ul>
     </div>
     <div id="novel_myTab1_Content1" style="display:none;">
      <p class="p_red">排行榜前10</p>
      <ul class="top_bg">
       <li class="gay_link"><span class="text-top">01</span><a
        href=""><img src="res/images/m_2.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">02</span><a
        href=""><img src="res/images/m_2.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="gay_link"><span class="text-top">03</span><a
        href=""><img src="res/images/m_2.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">04</span><a
        href=""><img src="res/images/m_2.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="gay_link"><span class="text-top">05</span><a
        href=""><img src="res/images/m_2.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">06</span><a
        href=""><img src="res/images/m_2.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="gay_link"><span class="text-top">07</span><a
        href=""><img src="res/images/m_2.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">08</span><a
        href=""><img src="res/images/m_2.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="gay_link"><span class="text-top">09</span><a
        href=""><img src="res/images/m_2.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">10</span><a
        href=""><img src="res/images/m_2.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
      </ul>
     </div>
     <div id="novel_myTab1_Content2" style="display:none;">
      <p class="p_red">排行榜前10</p>
      <ul class="top_bg">
       <li class="gay_link"><span class="text-top">01</span><a
        href=""><img src="res/images/m_3.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">02</span><a
        href=""><img src="res/images/m_3.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="gay_link"><span class="text-top">03</span><a
        href=""><img src="res/images/m_3.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">04</span><a
        href=""><img src="res/images/m_3.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="gay_link"><span class="text-top">05</span><a
        href=""><img src="res/images/m_3.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">06</span><a
        href=""><img src="res/images/m_3.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="gay_link"><span class="text-top">07</span><a
        href=""><img src="res/images/m_3.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">08</span><a
        href=""><img src="res/images/m_3.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="gay_link"><span class="text-top">09</span><a
        href=""><img src="res/images/m_3.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_gay.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
       <li class="white_link"><span class="text-top">10</span><a
        href=""><img src="res/images/m_3.jpg" />
       </a><a href="" class="mv_link"><img src="res/images/mv_play.png" />
       </a><span class="text-middle">[甄嬛传]</span>
       <li>
      </ul>
     </div>
    </div>
   </div>

 

 

 

分享到：
| jquery 滚动插件
评论
发表评论

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

相关推荐

    java选项卡小例子

    Java选项卡小例子是针对Java Swing库中的JTabbedPane组件的一个简单应用实例。在Java GUI编程中，JTabbedPane是一个非常实用的控件，它允许我们创建带有多个面板的界面，每个面板都可以作为单独的“选项卡”，用户...

    原生js简单的Tab选项卡切换支持多个静态选项卡切换代码

    本篇主要介绍如何使用原生JavaScript实现一个简单的Tab选项卡切换功能，支持多个静态选项卡的切换。 首先，我们需要理解HTML结构。在创建Tab选项卡时，通常会有两部分：一个是选项卡的标题（`&lt;button&gt;`或`&lt;a&gt;`标签...

    jQuery多个选项卡切换代码.zip

    "jQuery多个选项卡切换代码"就是一个典型的例子，尤其适用于股票基金交易网站，因为它可以帮助用户在不同的数据面板之间轻松切换，查看股票行情、基金表现等各类信息。 这个压缩包包含了一个实现选项卡切换的jQuery...

    简单复古js选项卡切换代码.zip

    "简单复古js选项卡切换代码.zip" 文件提供了一个实现这种功能的实例，结合了HTML5、jQuery、CSS和JavaScript技术。下面将详细阐述这些技术以及它们在选项卡切换中的应用。 首先，HTML5是现代网页开发的基础，提供了...

    Android 创建手机界面中的选项卡切换效果.rar

    Android实现手机界面中的TAB，也就是大家熟悉的选项卡效果，可以单击或轻触选项卡，切换主体部分的内容，目前在各种手机应用软件中已得到普遍使用，这是一个创建基本TAB选项卡的例子，使用了TabHost实现，运行效果如...

    tab选项卡的两个例子

    第一个可能是一个纯CSS实现的选项卡，利用`:checked`伪类和相邻选择器来切换内容的可见性。第二个例子可能引入了JavaScript，例如使用jQuery的`click`事件和`show/hide`方法，或者使用Vue.js的数据绑定和指令来实现...

    jquery图标控制选项卡切换代码.zip

    在本资源"jquery图标控制选项卡切换代码.zip"中，主要包含了一个使用jQuery实现的交互式选项卡切换功能。这个特效适用于网页设计，通过图标控制各个选项卡的展示，为用户提供更加直观和友好的界面体验。以下是关于这...

    CSS tab选项卡切换.zip

    总结起来，"CSS tab选项卡切换.zip"这个项目展示了如何使用CSS来创建一个功能完备、风格独特的选项卡切换效果，对于初学者来说，这是一个学习CSS选择器和交互设计的好例子。通过理解和实践这个案例，开发者可以提升...

    Tab选项卡切换代码.zip

    在本案例中，"Tab选项卡切换代码.zip" 包含了一个基于jQuery的简单选项卡切换解决方案。 jQuery是一款轻量级、高性能的JavaScript库，它简化了DOM操作、事件处理和动画效果。在jQuery中实现选项卡切换，首先需要...

    Android Tab 选项卡 切换

    总的来说，实现Android Tab选项卡切换需要对`ViewPager`和`TabLayout`有深入的理解，同时掌握`Fragment`或`Activity`的使用。通过合理的布局设计和事件处理，我们可以创建出符合Android Material Design规范的、功能...

    android 选项卡例子

    为了使应用更具交互性，还可以添加选项卡切换监听器，以便在选项卡切换时执行特定操作。 ```java tabHost.setOnTabChangedListener(new TabHost.OnTabChangeListener() { @Override public void onTabChanged...

    选项卡自动切换

    当用户手动选择一个选项卡时，应停止自动切换，直到切换时间间隔结束后再恢复。 以下是一个简单的JavaScript实现例子： ```javascript var tabs = document.querySelectorAll('.tabs li'); var contents = ...

    jQuery右侧选项卡切换.zip

    【jQuery右侧选项卡切换】是一种常见的网页交互设计，它用于组织和展示大量内容，使得用户可以轻松地在不同部分之间切换。在这个特定的案例中，选项卡布局位于页面的右侧，提供了一种垂直的导航方式，与传统的水平...

    选项卡面板例子JTabbedPane

    通过观察和修改代码，你可以学习到更多关于`JTabbedPane`的高级特性，比如自定义图标、添加关闭按钮、设置选项卡的可选性，以及响应选项卡切换事件等。 总之，`JTabbedPane`是Java Swing提供的一种强大工具，用于...

    jQuery多个tab切换选项卡代码.zip

    本压缩包"jQuery多个tab切换选项卡代码.zip"提供了一个实现多选项卡切换的示例，适用于那些想要在自己的网站上增加动态、互动选项卡功能的开发者。 首先，让我们深入理解jQuery选项卡的基本原理。jQuery选项卡通常...

    jQuery svg垂直图标标签tab选项卡切换特效

    本示例中的“jQuery svg垂直图标标签tab选项卡切换特效”是将jQuery的功能与SVG（Scalable Vector Graphics）图形技术相结合，用于创建交互式的用户界面。SVG是一种基于XML的矢量图像格式，具有分辨率无关性和可缩放...

    jQuery tab标签控制图片选项卡切换效果

    本主题聚焦于利用jQuery实现tab标签控制图片选项卡切换的效果，这在现代网页中是一个常见且实用的功能，可以有效地组织内容并提高用户体验。 首先，理解基本的HTML结构对于实现这种效果至关重要。通常，我们会有一...

    android选项卡demo

    通过自定义一个继承自BaseAdapter的类，可以将数据与选项卡关联，实现数据驱动的选项卡切换。 8. **设计原则**：在实现选项卡功能时，应遵循Android的设计指南，确保良好的用户体验。比如，选项卡数量不宜过多，...

    jQuery网站垂直选项卡切换代码.zip

    本压缩包"jQuery网站垂直选项卡切换代码.zip"包含了一个专门用于创建垂直布局、扁平设计和多色块效果的选项卡切换解决方案。 jQuery的选项卡切换功能主要通过其丰富的API和事件机制来实现。首先，我们需要在HTML中...

    原生js选项卡插件自定义图片滑动选项卡切换

    本主题探讨的是如何使用纯原生JS实现一个图片滑动选项卡切换的插件，无需依赖jQuery或其他库。这有助于提升网页性能，同时也能锻炼对JavaScript核心功能的理解。 首先，选项卡组件的基本原理是通过隐藏/显示不同的...

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