<!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. Linux部署apache

    一.我们使用源码安装 官网:https://httpd.apache.org/文档:https://httpd.apache.org/docs/2.4/ 下载源码包 httpd-2.4.20.tar. ...

  2. 第一个python程序hello.py

    使用vim编辑代码: #!/usr/bin/python2.7 #-*-coding:utf-8-*- name = raw_input('请输入你的名字:') print 'Hello,',name ...

  3. 关于IE8及其以下的IE版本不支持getElementsByClassName

    之前做一下项目的时候知道IE8以及其以下的版本不支持getElementsByClassName,于是乎自己写了一个函数重新定义getElementsByClassName,函数代码如下: funct ...

  4. python 多线程 笔记（一）

    #coding=utf-8 import threading from time import sleep, ctime loops = [4,2] def loop(nloop, nsec): pr ...

  5. 新公司入职第一天遇到的 关于 CSS 单行溢出文本显示省略号...的问题

    上班第一天 前端岗位,因为公司这个项目是标准开发 所以没法用框架在打架页面,好吧 我手写 各种div 各种css样式 好不忧伤,好吧 不废话了 进入正题. 想在导航栏中的 客户信息 功能点 实现溢出用 ...

  6. mongoDB研究笔记：journaling保证意外故障下的数据完整性

    mongoDB的Journaling日志功能与常见的log日志是不一样的,mongoDB也有log日志,它只是简单记录了数据库在服务器上的启动信息.慢查询记录.数据库异常信息.客户端与数据库服务器连接 ...

  7. 【ASP.NET Web API教程】6.4 模型验证

    本文是Web API系列教程的第6.4小节 6.4 Model Validation 6.4 模型验证 摘自:http://www.asp.net/web-api/overview/formats-a ...

  8. Scrum 是什么？

    Scrum 是什么? Scrum 是当前最流行的敏捷软件开发方法论和实施框架.但就像人们对 “Agile” 术语的不同理解一样,不同的人对 “Scrum” 也有着不同的理解.那么,到底 Scrum 是 ...

  9. VS2012 生成事件

    在一个解决方案中有多个项目的时候,我们常需要拷贝一些文件,dll到指定的目录下,或者遇到com组件还需要提前注册dll,这个就需要用到VS的生成事件. 一.位置: 项目-->右键-->属性 ...

  10. 如何把excel数据导入数据库

    这里介绍2种把excel数据导入oracle数据库的方法. 1. 在excel中生成sql语句. 1)在数据列的右侧,第一行的任何位置输入="insert into table(xx,yyy ...