<!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. 冒泡排序优化JAVA

    本文对传统的冒泡排序进行了一些优化,减少了循环次数. 时间复杂度 若文件的初始状态是正序的,一趟扫描即可完成排序.所需的关键字比较次数 C 和记录移动次数 M 均达到最小值: C(min)=n-1 , ...

  2. [转]Oracle数据泵的使用

    使用数据泵导出数据 1.连接Oracle数据库SQL> conn / as sysdba已连接. 2.创建一个操作目录SQL> create directory dump_dir as ' ...

  3. log4net Tutorial

    Introduction One of the greatest logging tools out there for .NET is log4net. This software is the g ...

  4. 1.1 Activity

    1.概念 Application:由多个相关的松散的与用户进行交互Activity组成,通常被打包成apk后缀文件中: Activity:就是被用来进行与用户交互和用来与android内部特性交互的组 ...

  5. Win系统查看系统的几个命令

    1. 查看显卡或者显存信息 Win + R dxdiag 2. 查看显卡是独立显卡,或者集成显卡 查看计算机显卡的方法 第一种方法:查看主机连接显示器VGA线连接的接口. 如图:VGA连接线连接在主机 ...

  6. C++中复制构造函数

    复制构造函数 复制构造函数用于: 根据另一个同类型的对象显示或隐式初始化一个对象 复制一个对象,将它作为实参传给一个函数 从函数返回时复制一个对象 初始化顺序容器中的元素 根据元素初始化式列表初始化数 ...

  7. RHEL5.8使用yum安装xclock

    使用xshell连接RHEL5.8服务器,敲入xclock命令想验证图形化安装条件,但是显示无此命令. [root@template ~]# xclock -bash: xclock: command ...

  8. IIS 7.5 + asp.net MVC4 设置路由处理URL请求

    使用asp.net MVC4开发的网站,在本地的VS012环境下运行,一切正常.但当发布到Windows 2008 R2(IIS7.5 + Framework4.5)上时,访问相关网页时,出现有下面的 ...

  9. 用c#开发微信 (9) 微渠道 - 推广渠道管理系统 4 部署测试 (最终效果图)

    我们可以使用微信的“生成带参数二维码接口”和 “用户管理接口”,来实现生成能标识不同推广渠道的二维码,记录分配给不同推广渠道二维码被扫描的信息.这样就可以统计和分析不同推广渠道的推广效果. 本文是微渠 ...

  10. 基于Qt的流程设计器（一）

    一: 先来看一下界面的截图:   说明: 拖动节点的时候,与该节点相关的箭头连线也会跟着调整: 用户可以使用鼠标从一个节点拖出一个箭头到另一个节点(鼠标在空白区域点击一下,拖出的箭头消失)   这三个 ...