<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<HEAD>

<TITLE>仿网易TAB标签</TITLE>

<META http-equiv=Content-Type content="text/html; charset=gb2312">

<STYLE type=text/css>

BODY {

    FONT-SIZE: 14px; }

OL LI {

    MARGIN: 8px

}

#con {

    FONT-SIZE: 12px; MARGIN: 0px auto; WIDTH: 600px

}

#tags {

    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px 0px 0px 10px; WIDTH: 400px; PADDING-TOP: 0px; HEIGHT: 23px

}

#tags LI {

    BACKGROUND: url(/jscss/demoimg//tagleft.gif) no-repeat left bottom; FLOAT: left; MARGIN-RIGHT: 1px; LIST-STYLE-TYPE: none; HEIGHT: 23px

}

#tags LI A {

    PADDING-RIGHT: 10px; PADDING-LEFT: 10px; BACKGROUND: url(/jscss/demoimg//tagright.gif) no-repeat right bottom; FLOAT: left; PADDING-BOTTOM: 0px; COLOR: #;LINE-HEIGHT: 23px; PADDING-TOP: 0px; HEIGHT: 23px; TEXT-DECORATION: none

}

#tags LI.emptyTag {

    BACKGROUND: none transparent scroll repeat % %; WIDTH: 4px

}

#tags LI.selectTag {

    BACKGROUND-POSITION: left top; MARGIN-BOTTOM: -2px; POSITION: relative; HEIGHT: 25px

}

#tags LI.selectTag A {

    BACKGROUND-POSITION: right top; COLOR: #; LINE-HEIGHT: 25px; HEIGHT: 25px

}

#tagContent {

    BORDER-RIGHT: #aecbd4 1px solid; PADDING-RIGHT: 1px; BORDER-TOP: #aecbd4 1px solid; PADDING-LEFT: 1px; PADDING-BOTTOM: 1px; BORDER-LEFT: #aecbd4 1px solid;PADDING-TOP:1px; BORDER-BOTTOM: #aecbd4 1px solid; BACKGROUND-COLOR: #fff

}

.tagContent {

PADDING-RIGHT: 10px; DISPLAY: none; PADDING-LEFT: 10px; BACKGROUND: url(/jscss/demoimg//bg.gif) repeat-x; PADDING-BOTTOM: 10px; WIDTH: 576px; COLOR: #; PADDING-TOP: 10px; HEIGHT: 250px

}

#tagContent DIV.selectTag {

DISPLAY: block

}

</STYLE>

</HEAD>

<BODY>

<DIV id=con>

<UL id=tags>

  <LI><A onClick="selectTag('tagContent0',this)"

  href="javascript:void(0)">源码爱好者</A> </LI>

  <LI class=selectTag><A onClick="selectTag('tagContent1',this)"

  href="javascript:void(0)">ASP源码</A> </LI>

  <LI><A onClick="selectTag('tagContent2',this)"

  href="javascript:void(0)">自适应宽度的标签</A> </LI></UL>

<DIV id=tagContent>

<DIV class=tagContent id=tagContent0>提供开源编程源码、电子书及技术文档、JavaScript/CSS特效代码以及常用软件下载等。</DIV>

<DIV class="tagContent selectTag" id=tagContent1>这时是ASP标签的内容。</DIV>

<DIV class=tagContent id=tagContent2>自适应宽度的标签内容。</DIV></DIV></DIV>

<SCRIPT type=text/javascript>

function selectTag(showContent,selfObj){

    // 标签

    var tag = document.getElementById("tags").getElementsByTagName("li");

    var taglength = tag.length;

    for(i=; i<taglength; i++){

    tag[i].className = "";

    }

    selfObj.parentNode.className = "selectTag";

    // 标签内容

    for(i=; j=document.getElementById("tagContent"+i); i++){

    j.style.display = "none";

    }

    document.getElementById(showContent).style.display = "block";

}

</SCRIPT>

</BODY>

</HTML>

http://www.codefans.net/jscss/code/766.shtml

仿网易漂亮的TAB选项卡(标签)的更多相关文章

  1. 仿网易新闻app下拉标签选择菜单

    仿网易新闻app下拉标签选择菜单 仿网易新闻app下拉标签选择菜单,长按拖动排序,点击增删标签控件 ##示例  ##EasyTagDragView的使用 在layout布局里添加:  

  2. 类似掌盟的Tab页 Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签 （转）

    原博客地址  :http://blog.csdn.net/xiaanming/article/details/10766053 本文转载,记录学习用,如有需要,请到原作者网站查看(上面这个网址) 之前 ...

  3. Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签

    转载请注明出处:http://blog.csdn.net/xiaanming/article/details/10766053 之前用JakeWharton的开源框架ActionBarSherlock ...

  4. 简单的方法实现仿微信底部的Tab选项卡界面

    在网上看了比较多的关于Tab的教程,发现都很杂乱.比较多的用法是用TitlePagerTabStrip和ViewPaper.不过TitlePagerTabStrip有个很大的缺陷,Tab里面的内容刚进 ...

  5. Android 开源框架ActionBarSherlock 和 ViewPager 仿网易新闻客户端

    转载请注明出处:http://blog.csdn.net/xiaanming/article/details/9971721 大家都知道Android的ActionBar是在3.0以上才有的,那么在3 ...

  6. Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻clientTab标签

    之前用JakeWharton的开源框架ActionBarSherlock和ViewPager实现了对网易新闻clientTab标签的功能,ActionBarSherlock是在3.0下面的机器支持Ac ...

  7. 使用jQuery开发tab选项卡插件（可以右键关闭多个标签）

    在前一篇“使用jQuery开发tab选项卡插件”的基础上添加了tab标签右键关闭菜单功能,菜单主要包括:关闭当前标签.关闭左侧标签.关闭右侧标签.关闭其他.关闭全部. 一.插件效果 二.实现思路 为w ...

  8. Android开源系列：仿网易Tab分类排序控件实现

    前言 产品:网易新闻那个Tab排序好帅. 开发:哦~ 然后这个东东在几天后就出现了..... (PS:差不多一年没回来写博客了~~~~(>_<)~~~~,顺便把名字从 enjoy风铃 修改 ...

  9. 移动web：tab选项卡

    平常做移动端会用到tab选项卡,这和PC端有些区别,移动端是触摸滑动切换,PC端是点击.移入切换. 这里滑动切换就是一个移动端事件的应用,这里主要用到的触摸事件:touchstart.touchmov ...

随机推荐

  1. 斯坦福第七课：正则化(Regularization)

    7.1  过拟合的问题 7.2  代价函数 7.3  正则化线性回归 7.4  正则化的逻辑回归模型 7.1  过拟合的问题 如果我们有非常多的特征,我们通过学习得到的假设可能能够非常好地适应训练集( ...

  2. [译]GLUT教程 - glutPostRedisplay函数

    Lighthouse3d.com >> GLUT Tutorial >> Avoiding the Idle Func >> glutPostRedisplay 直 ...

  3. RMQ_ST算法

    RMQ (Range Minimum/Maximum Query)算法 1. 概述 RMQ(Range Minimum/Maximum Query),即区间最值查询,是指这样一个问题:对于长度为n的数 ...

  4. FFMpeg写MP4文件例子分析

    http://blog.csdn.net/eightdegree/article/details/7425811 这段时间看了FFMpeg提供的例子muxing.c,我略微修改了下源代码,使其生成一个 ...

  5. Javac不是内部或外部指令

    JDK安装完,命令行窗口中运行Java正常,运行Javac显示不是内部或外部指令 不存在百度上说的没有安装JDK,只安装了JRE 我的电脑是64位Win7操作系统 第一次安装的JDK不是从官网下载的, ...

  6. iOS 重大新漏洞：可绕开苹果审核机制

    iOS 是目前最为安全可靠的移动平台,但既然是软件就不会是无坚不摧的.乔治亚技术信息安全中心 (Georgia Tech Information Security Center)的研究员不久前声称,他 ...

  7. 把HDFS里的json数据转换成csv格式

      1. 全景图 2. 用ListHDFS获取所有文件名   如果想重新再取一次,右健view state:   点击 clear state, 再运行,即可再次采集数据了.   3. 用FetchH ...

  8. 【笔记】select2的使用

    <script src="~/Scripts/jquery-1.10.2.js"></script> <script src="~/Cont ...

  9. [ACM_水题] UVA 11729 Commando War [不可同时交代任务 可同时执行 最短完成全部时间 贪心]

    There is a war and it doesn't look very promising for your country. Now it's time to act. You have a ...

  10. C# 通过SerialPort简单调用串口

    问题 最近比较经常使用串口进行发送以及传输数据,但是笔者在刚开始接触SerialPort类时,对于Write之后去Read数据的时候,由于设备上面还没有返回数据,读取到的只能是空值.然而,再进行下一次 ...