//万能选项卡
function PaPtabs(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 + "C" + i).style.display = "block";
}
else {
tabList[i].className = "pnormal";
document.getElementById(tabObj + "C" + i).style.display = "none";
}
}
};

前端代码:

<div class="Hotitle MT15">
<h4>肿瘤热门</h4>
<ul id="N3">
<li class="active" onclick="PaPtabs(this,0);">1111</li>
<li onclick="PaPtabs(this,1);">22222</li>
</ul>
</div>
<div class="Rask ImgWod" id="N3C0">
aaaa
</div>
<div class="Rask ImgWod none" id="N3C1">
bbbb
</div>

万能选项卡,tab选项卡的更多相关文章

  1. 基于CkEditor实现.net在线开发之路(4)快速布局,工具箱,模板载入,tab选项卡简单说明与使用

    上一章给常用的from表单控件属性页面,进行了简单说明和介绍,但是由于是在网页中做界面设计,操作肯定没有桌面应用程序方便,便捷,为了更方便的布局与设计,今天我主要说一下快速布局,工具箱,tab选项卡, ...

  2. 可轮播滚动的Tab选项卡

    前段时间有试着搭建个后台主题ui框架,有用到可支持滚动的Tab选项卡,模仿着H+后台主题ui框架中的代码造轮子改造了下,可惜代码在公司,不能把代码外发出来(感觉这样被限制了很多,对于这样的公司没办法, ...

  3. android tab选项卡的使用

    项目做完了,写写博客,在项目中遇到的一些问题,或者是自己觉得很不错的东西.这一篇主要是想和大家分享一下我在项目中封装的一个东西,就是tab选项卡.先看看效果图: 我在网上看了很多有关选项卡的demo, ...

  4. js基础练习一之tab选项卡

    最近在学习前端,当然包括js,css,html什么的,在听课时做的一些小练习,记录下来: 实例一: --Tab选项卡-- <script type="text/javascript&q ...

  5. :target伪类制作tab选项卡

    :target伪类的作用是突出显示活动的HTML锚,下面是一个简单的例子: HTML代码: <div> <a href="#demo1">点击此处</ ...

  6. 工作当中实际运用(1)——tab选项卡

    不废话 直接上代码: tab选项卡 window.onload=function(){ var titles= document.getElementById('header-dh').getElem ...

  7. 选项卡 tab切换

    <!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 各种效果的tab选项卡

    ;(function($){ $.fn.tabso=function( options ){ var opts=$.extend({},$.fn.tabso.defaults,options ); r ...

  9. (2)WinForm中改变Tab选项卡的顺序

    Tab选项卡选中,在其属性中找到TabPages这个属性.点进去,可以通过上下移动标签卡改变标签卡的顺序.

  10. 原生js实现tab选项卡里内嵌图片滚动特效代码

    <!DOCTYPE HTML><html lang="en-US"><head><meta charset="UTF-8&quo ...

随机推荐

  1. 强大的MobaXterm

    MOobaXterm是一款强大的远程终端登录软件. 1.多终端分屏 2.内建SFTP文件传输(这个功能用的太爽了) 等等 功能强大,还需要继续研究

  2. codeforces #446 892A Greed 892B Wrath 892C Pride 891B Gluttony

    A  链接:http://codeforces.com/problemset/problem/892/A 签到 #include <iostream> #include <algor ...

  3. 第七届C/C++B-方格填数 DFS

    方格填数 如下的10个格子    +--+--+--+    |  |  |  | +--+--+--+--+ |  |  |  |  | +--+--+--+--+ |  |  |  | +--+- ...

  4. OGNL简介

    OGNL 一:OGNL简介 OGNL的全称是Object  Graph  Navigation  Language即对象导航语音.它是一个开源项目,工作在视图层,用来取代页面中的java脚本.简化数据 ...

  5. JavaScript参考

    要查看英语原文,请勾选"英语"复选框.也可将鼠标指针移到文本上,在弹出窗口中显示英语原文. 翻译 英语 JavaScript 语言参考 JavaScript 是一种可嵌入网页和其他 ...

  6. NOIP2017普及组初赛解析

    首发于订阅号 嗨编程,这是一个以嗨为目标的编程订阅号(仅仅是目标而已),扫码可关注,不定期更.

  7. 多线程编程学习笔记——async和await(二)

    接上文 多线程编程学习笔记——async和await(一) 三.   对连续的异步任务使用await操作符 本示例学习如何阅读有多个await方法方法时,程序的实际流程是怎么样的,理解await的异步 ...

  8. Python爬虫(十一)_案例:使用正则表达式的爬虫

    本章将结合先前所学的爬虫和正则表达式知识,做一个简单的爬虫案例,更多内容请参考:Python学习指南 现在拥有了正则表达式这把神兵利器,我们就可以进行对爬取到的全部网页源代码进行筛选了. 下面我们一起 ...

  9. centos yum安装ffmpeg

    ffmpeg是一个重要的应用软件,用于执行与视频文件转换成不同的视频流格式的视频站点,能够安装在linux系统上来使用 (一)安装编译环境  #yum install -y automake auto ...

  10. vue-购物车

    最终的实现效果: 需求分析: 购物车需要展示一个已加入购物车的商品列表,包含商品名称,商品单价,购买数量和操作等信息,还需要实时显示购买的总价.其中购买数量可以增加或减少,每类商品还可以从购物车中移除 ...