<!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. CCS样式表小结

    CSS(Cascading Style Sheet,叠层样式表),作用是美化HTML网页. /*注释区域*/    此为注释语法 一.样式表 (一)样式表的分类 1.内联样式表 和HTML联合显示,控 ...

  2. Linq to SQL 简单增删改查

    用Linq大大减少了对数据库的一般操作所需的编码量.运行下面事例之前,首先建一个叫做Alien的数据库表. CREATE TABLE [dbo].[Aliens](    [Id] [int] IDE ...

  3. Win8启用便签

    启动或显示 Sticky Notes : Win+R--->StikyNot.exe 备份Sticky Notes保存位置 : %AppData%\Microsoft\Sticky Notes\ ...

  4. redis远程连接超时

     今天在用jedis连接远程的redis时,抛出连接超时异常:connect timed out. 详细信息例如以下: Exception in thread "main" r ...

  5. python中的对象拷贝

    python中.进行函数參数传递或者返回值时,假设是一般的变量,会拷贝传递.假设是列表或字典则是引用传递.那python怎样对列表和字典进行拷贝传递呢:标准库的copy模块提供了两个方法:copy和d ...

  6. jfinal拦截器301跳转

    在jfinal的handle中加入 HandlerKit.redirect301("http://10.10.3.144:8080/bbb.rar", request, respo ...

  7. ios的@property属性和@synthesize属性

    当你定义了一系列的变量时,需要写很多的getter和setter方法,而且它们的形式都是差不多的,,所以Xcode提供了@property 和@synthesize属性,@property用在 .h ...

  8. Android学习站点推荐

    收集了一些比較好的Android学习站点,希望对大家有所帮助: 1.http://developer.android.com/ Android官方站点,可惜被屏蔽了,须要使用FQ软件 2.http:/ ...

  9. java07 map

    map底层,数组加链表 集合: 是一个对象,只不过这个对象可以容纳别的对象.存放对象就是操作地址. List:是有序可重复的. Set:无顺序,不可重复,有重复则后面把前面的覆盖. Map:键值对. ...

  10. QT事件

    qtevents多线程工作object存储 Another Look at Events(再谈Events) 最近在学习Qt事件处理的时候发现一篇很不错的文章,是2004年季刊的一篇文章,网上有这篇文 ...