<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<title>my_tab</title>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<style>
ul, li{list-style:none;}
#tab ul li{float:left;width:40px;}
.clearBoth{clear:both;}
.ok{display:none;}
.dis{display:block;}
</style>
<body>
<div id="tab">
    <ul>
        <li><a onClick="selectTag('tagContent0', this)" href="javascript:void(0)">1111</a></li>
        <li><a onClick="selectTag('tagContent1', this)" href="javascript:void(0)">222</a></li>
        <li><a onClick="selectTag('tagContent2', this)" href="javascript:void(0)">333</a></li>
    </ul>
    <br class="clearBoth" />
    <div id="tagContent0" class="ok dis">
    xxxxx
    </div>

<div id="tagContent1" class="ok">
    yyyyyyyyyyy
    </div>

<div id="tagContent2" class="ok">
    zzzzz
    </div>
</div>
<script>
function selectTag(showContent, selfObj)
{
    var tag = document.getElementById("tab").getElementsByTagName("li");
    var tagLength = tag.length;
    for(i=0; i<tagLength; i++)
    {
        tag[i].className = "";
    }
    selfObj.parentNode.className = "selectTag";

for(i=0; j=document.getElementById("tagContent"+i); i++)
    {
        if(i >= tagLength) break;
        j.style.display = "none";
    }
    document.getElementById(showContent).style.display="block";
}
</script>
</body>
</html>

javascript tab onclick的更多相关文章

  1. 在Javascript中onclick()方法应用

    <html> < head> < script type="text/javascript"> function onclick1(){ ale ...

  2. javascript中onclick事件能调用多个方法吗

    Q: javascript中onclick事件能调用多个方法吗? A: 可以的,方法如下onclick="aa();bb();cc();"每个方法用“;”分号隔开就行了

  3. JavaScript的 onclick 事件是如何调用jquery 方法的

    看见个不错的问答,关于JavaScript的 onclick 事件是如何调用jquery 方法的,特此标注,链接如下:http://segmentfault.com/q/101000000033350 ...

  4. javascript中onclick(this)用法介绍

    this指触发事件的对象 代码如下: <input id="myinput" type="text" value="javascript中onc ...

  5. JavaScript tab页

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

  6. javascript 基础 onclick(this)用法介绍

    http://www.5idev.com/p-javascript_events_onclick.shtml --------------------------------------------- ...

  7. javascript中onclick(this)用法和onclick(this.value)用法介绍

    onclick(this.value)代码详解 <html> <head> <script language="javascript"> fun ...

  8. JavaScript之onclick事件

    对于给同一个元素添加两个点击事件时,其中一个是通过js获取元素添加点击事件另一个是通过内联的方法为元素添加事件. 执行之后只会执行通过元素获取的点击事件.而内联式的添加点击事件是不会执行的 还有一个就 ...

  9. JavaScript获取onclick、onchange等事件值的代码

    这里主要是用到了getAttributeNode()这个方法,它获取的是属性节点,忽略属性和事件的差别,具体示例如下,感兴趣的朋友可以参考下哈希望对大家有所帮助 今天小菜处理下拉菜单级联问题时,想获取 ...

随机推荐

  1. java+数据库+D3.js 实时查询人物关系图

    先看下 效果 某个用户,邀请了自己的朋友 ,自己的朋友邀请了其他朋友,1 展示邀请关系,2 点击头像显示邀请人和被邀请人的关系.(网上这种资料很少, 另外很多都是从JSON文件取 数据, 这里是从数据 ...

  2. 文件正在上传的转圈圈gif图片引出的fixed定位和absolute定位

     文件正在上传的转圈圈gif图片  一.文件上传时,未上传返回成功状态之前给个gif动态图片显示在页面,改善用户体验. <!--S 遮罩层 --> <div id="mas ...

  3. WPF WebBrowser

      XAML <Window x:Class="WpfApplication5.Window1"     xmlns="http://schemas.microso ...

  4. SilkTest天龙八部系列1-初始化和构造函数

    SilkTest没有提供专门的构造函数机制,但是在类对象生成的过程中,会先初始化在类中申明的变量.我们可以在初始化该变量的时, 调用某些函数完成对象初始化工作,看上去好像是调用了构造函数一样.不过要记 ...

  5. 判断URL是否存在

    判断URL是否存在   判断网址是否存在,可以使用下面方面处理.如果HttpStatusCode为OK,说明网址存在.

  6. 页面常见效果js实现

    2015.12.2 页面常见效果js实现 [有没有觉得很坑,[笑哭,邮箱写上]] 复习: Js内置对象: 1.浏览器对象 window document history location event  ...

  7. 从Kali 2.0 转至 Kali Rolling

    1. 修改官方软件库列表 编辑/etc/apt/sources.list,注释掉原有内容,然后添加下述内容. # kali rolling deb http://http.kali.org/kali ...

  8. Objective-c中的设计模式

    如果你会写算法,又理解设计模式,你就牛逼了.后面一段时间我会尽可能易懂的描述来讲解iOS中的设计模式,并且每个设计模式都会有对应的demo:https://github.com/goodyboy6/D ...

  9. zzzzw_在线考试系统②管理员篇章

    今天实现了管理的功能,谈谈遇到的问题!我先上图 图一   管理员的数据库 在action中访问Servlet API的非IoC方式之一:使用apache.struts2.ServletActionCo ...

  10. Vs2010中rdlc报表绑定DataTable数据源

    首先,新建一个网站,接着添加数据集,并且命名为student,如下图所示: 在该数据集对象上面添加datatable,并且设置列名,如下图所示: 添加一张报表,命名为student,如下图所示: 向报 ...