<!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. Jade之条件语句

    条件语句 jade支持js中的if/elseif/else语法. jade: - var user = { description: 'foo bar baz' } - var authorised ...

  2. 让linux中的程序崩溃时生成core文件

    当我们的linux程序崩溃的时候,常常会有这样的提示:    Segmentation fault (core dumped)    段错误 (核心已转储)    提示说生成了core文件,但是此功能 ...

  3. 企业模式之Unit Of Work模式

    在开始UnitOfWork模式之前有必要回顾下我们耳熟能详的Data Access Object(DAO)模式,即数据访问对象.DAO是一种简单的模式,我们构建应用的时候经常会使用到它,它的功能就是将 ...

  4. jQuery学习总结（二）

    简单选择器: 在使用jQuery 选择器时,我们首先必须使用“$()”函数来包装我们的CSS 规则. 而CSS 规则作为参数传递到jQuery 对象内部后,再返回包含页面中对应元素的jQuery 对象 ...

  5. canvas放射性渐变填充

    今天在学习canvas时,遇到canvas的fillstyle有一个createRadialGradient()方法,创建放射性渐变. 上代码: <!DOCTYPE html> <h ...

  6. JavaWeb学习总结(三)——Tomcat服务器学习和使用(二)

    一.打包JavaWeb应用 在Java中,使用"jar"命令来对将JavaWeb应用打包成一个War包,jar命令的用法如下:

  7. windows小技巧 从文件夹直接打开命令行位置

    windows下从命令行打开某个目录下的东东时,会一直cd  ~~~~,更简单的是: 直接用鼠标找到该文件夹或者文件,按住Shift键然后点击鼠标右键,选择"在此处打开命令行"即可 ...

  8. hdu 4651 - Partition(五边形数定理)

    定理详见维基百科....http://zh.wikipedia.org/wiki/%E4%BA%94%E9%82%8A%E5%BD%A2%E6%95%B8%E5%AE%9A%E7%90%86 代码如下 ...

  9. vimium: 浏览器神器

    chrome firefox 都有 vimium (firefox 中为vimfx), 快捷键也差不多 下边是chrome中快捷键示意图: G = shift + g (其他同理) c+e = ctr ...

  10. 关于oralce字符集问题（复制别人的，纯属自己学习）

    本文主要讨论以下几个部分: 1.如何查看查询oracle字符集. 2.修改设置字符集以及常见的oracle utf8字符集 3.oracle exp 字符集问题 正文: 一.字符集参数 影响Oracl ...