`

一个选项卡切换的例子

选项卡切换 
阅读更多

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 滚动插件
评论
发表评论

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

相关推荐

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

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

    tab选项卡的两个例子

    tab选项卡实现切换效果

    选项卡滚动切换

    选项卡标签带按钮控制滚动切换，这个例子简单实用，适合网站运用

    android选项卡demo

    demo 简单实现了选项卡的切换样色设置等功能

    Tab选项卡页面滑动切换

    选项卡切换效果，内容滑动切换。两个简单小例子仅供大家学习参考用。

    安卓源码包 UI布局 textView SQLSEVER&安卓 Tab选项卡Android例子源码 33个合集.zip

    安卓源码包 UI布局 textView SQLSEVER&安卓 Tab选项卡Android例子源码 33个合集： [四次元]Android ViewPager Fragment实现选项卡.rar [四次元]Android 操作数据库实例.zip [四次元]android 通过jdts.jar 连接SQL...

    VC 的窗口TAB选项卡制作例子.rar

    VC 的窗口TAB选项卡制作例子，切换的时候像拉帘一样从边框移动预定位置，整个TAB都是移动，给静态的窗体界面增添一些动感元素，景两年的网络蚂蚁软件曾有过这种效果。

    aui-tab底部选项卡关联内容且让内容随之切换

    移动框架：aui的底部导航栏tab，关联内容footer_bar_frm以及完成选项卡的切换...在官网给出的例子基础上，增加关联内容，实现选项卡切换内容随之切换的功能。这是完整开发例子源码包，直接浏览器预览即可看到完整功能。

    使用CSS3实现选项卡切换的方法

    :target是什么？ MDN是这样描述的：:target  The :target pseudo-class represents ...在document中，可以设置锚链接，举个例子： CSS Code复制内容到剪贴板 &lt;a&gt;Test :target&lt;/a&gt; &lt;a&gt;Test 2:target&lt;/a&gt; &lt;div

    TAB 滑动菜单 选项卡功能嵌套的例子.rar

    TAB 滑动菜单 选项卡功能嵌套的例子,在同一个页面中显示两个TAB风格的菜单,一个鼠标点击的那种,一个是鼠标移上去,即时显示切换内容的那种,可以说是TAB和滑动门同时显示在一个网页中.

    android仿微信底部选项卡（可滑动）

    android仿微信底部选项卡（可滑动），里面的例子有两个，一个是仿微信点击可以切换选项卡，一个是用viewpager实现可滑动和切换的底部选项卡。

    实现选项卡切换过程中的动画特效

    自定义选项卡切换过程中的动画效果。用户点击某个列表，一个小箭头会从之前的列表上面移动到当前点击的列表上面。可以在tab上面加上小箭头用于显示当前处于哪个列表。是一个不错的学习例子，喜欢的朋友可以下载研究...

    实现圆弧样式的选项卡效果

    该源码由源码天堂免费提供下载，源码实现如何让多个列表圆弧状排列的的界面选项卡，列表之间的切换动画很不错。也可以左右滑动界面来切换视图，tab也随着视图...是一个不错的学习例子，喜欢的朋友可以下载研究一下，。

    jQuery自动切换/点击切换选项卡效果的小例子

    代码如下:&lt;!DOCTYPE html PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” ...&lt;head&gt;&lt;... charset=GBK”&gt;&lt;...404 Not Found&lt;... 找不到指定的页面 ”totalSecond”&gt;3秒后自动返回&lt;...script lang

    轻松实现jquery选项卡切换效果

    刚开始有看到一个很通俗易通的例子：alert对话框。 jquery.alertMsg.js /** * [description] * @param {[type]} $ [description] * @return {[type]} [description] */ (function($){ $.fn.alertMsg = ...

    会自动播放样子也很经典的jquery选项卡

    会自动播放样子也很经典的jquery选项卡 用户jQuery 入门的好例子

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