<!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中两个值互换

    两个值互换有以下三种方式: 使用临时变量(此种方法便于理解) x = 10; y = 20; //begin int temp = x; x = y; y = temp; //end; //此时x = ...

  2. C# async await 学习笔记1

    由于我的开发工具为vs.net 2010(.net 4.0),需先做以下两步才能进行: 1.下载并安装Async CTP (http://www.microsoft.com/en-us/downloa ...

  3. h5自动生成工具

    一.前言 写了很多h5之后,对于写手写html和css已经麻木的我决定动手写个工具自动生成h5结构和样式.其实这个想法由来已久,但总是觉得自己技术不够,所以一直没实行.直到某天我真的写够了,我决定动手 ...

  4. Webpack使用教程四（Loaders）

    Loaders是webpack最有用的特性之一,通过Loaders,webpack可以预处理源码文件中的Json文件或者将包含新特性的Javascript代码转换成浏览器能处理的JavaScript代 ...

  5. Orchard Platform v1.8 发布

    发布说明: 1. 添加Json格式数据文件支持.2. 彻底删除了Settings, Modules, Themes模块.3. 删除了默认的ContentType,Site和User.4. 支持空库(无 ...

  6. [BTS] SQL Adapter. New transaction cannot enlist in the specified transaction coordinator

    The adapter "SQL" raised an error message. Details "New transaction cannot enlist in ...

  7. JAVA软件开发职责

    1.了解OO,AOP,SOA设计模式.J2EE的核心设计模式.应用架构模式和应用集成模式:2.熟练使用Spring.Hibernate/ibatis.Struts等通用性开源框架,并对其原理有深刻的理 ...

  8. Nginx - Windows下Nginx初入门

    公司刚使用nginx,预先学习下.鉴于机器没有Linux环境,在Windows熟悉下. 下载 目前(2015-07-11),nginx的稳定版本是1.8.0,在官网下载先,windows版的nginx ...

  9. Atitit.html css  浏览器原理理论概论导论attilax总结

    Atitit.html css  浏览器原理理论概论导论attilax总结 1.1. 浏览器是怎样工作的:渲染引擎,HTML解析(连载二)1 2. 5.1.1 DOM标准 1011 3. <We ...

  10. 菜鸟学习WCF笔记-Address

    终结点是WCF最为核心的对象,因为它承载了所有通信功能.服务通过相应的终结点发布出来,客户端通过与之匹配的终结点对服务进行调用.终结点有地址.绑定和契约ABC三要素构成. Address  作为终结点 ...