`
hxy-go
  • 浏览: 39263 次
  • 性别: Icon_minigender_1
  • 来自: 昆明
社区版块
存档分类
最新评论

简洁竖排Tab

    博客分类:
  • Js
阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" >
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=gb2312" />
<title>简洁Tab</title>
<style type="text/css">
<!--
body{ padding:0;font:12px "宋体"; }
/*选项卡1*/
#lib_Tab1_sx{width:500px;margin:0px;padding:0px;margin-bottom:15px; overflow:hidden;}

/*菜单class*/
.lib_tabborder_sx{border:1px solid #95C9E1;}
.lib_Menubox_sx {line-height:28px;position:relative; float:left; width:130px; height:240px;border-right:1px solid #95C9E1;}

.lib_Menubox_sx ul{margin:0px;padding:0px;list-style:none; position:absolute; top:15px; left:5px; margin-left:10px; height:25px;text-align:center;}
.lib_Menubox_sx li{display:block;cursor:pointer;width:114px;color:#949694;font-weight:bold; margin-bottom:5px;height:25px;line-height:25px; background-color:#E4F2FD}
.lib_Menubox_sx li.hover{padding:0px;background:#fff;width:116px;border:1px solid #95C9E1; border-right:0;
color:#739242;height:25px;line-height:25px;}
.lib_Contentbox_sx{margin-top:0px; border-top:none;padding:20px; border-left:0; margin-left:130px;}
-->
</style>
<script>
<!--
function setTab(name,cursel,n){
for(i=1;i<=n;i++){
var menu=document.getElementById(name+i);
var con=document.getElementById("con_"+name+"_"+i);
menu.className=i==cursel?"hover":"";
con.style.display=i==cursel?"block":"none";
}
}
//-->
</script>
</head>
<body>
<div id="lib_Tab1_sx" class="lib_tabborder_sx" style="width: 1500px; height:600px">
<div class="lib_Menubox_sx " style="width: 130px; height: 600px">
<ul>
<li id="one1" onclick="setTab('one',1,5)" class="hover">新闻1</li>
<li id="one2" onclick="setTab('one',2,5)" >新闻2</li>
<li id="one3" onclick="setTab('one',3,5)">新闻3</li>
<li id="one4" onclick="setTab('one',4,5)">新闻4</li>
<li id="one5" onclick="setTab('one',5,5)">新闻5</li>
</ul>
</div>
<div class="lib_Contentbox_sx ">
<div id="con_one_1" >新闻列表1</div>
<div id="con_one_2" style="display:none">新闻列表2歌手介绍:
英文名字:Celine Dion
出生地:加拿大,魁北克,Charlemagne
星座与生肖:白羊座、猴
婚姻状况:与ReneAngelil结婚
歌手介绍:
英文名字:Celine Dion
出生地:加拿大,魁北克,Charlemagne
星座与生肖:白羊座、猴
婚姻状况:与ReneAngelil结婚
歌手介绍:
英文名字:Celine Dion
出生地:加拿大,魁北克,Charlemagne
星座与生肖:白羊座、猴
婚姻状况:与ReneAngelil结婚
歌手介绍:
英文名字:Celine Dion
出生地:加拿大,魁北克,Charlemagne
星座与生肖:白羊座、猴
婚姻状况:与ReneAngelil结婚
歌手介绍:
英文名字:Celine Dion

</div>
<div id="con_one_3" style="display:none">新闻列表3</div>
<div id="con_one_4" style="display:none">新闻列表4</div>
<div id="con_one_5" style="display:none">新闻列表5</div>
</div>
</div>
</body>
</html>

 

注:此文是网上粘贴,非原创

分享到:
评论

相关推荐

    mfc 自绘控件实现 竖排TAB sheet控件

    在MFC(Microsoft Foundation Classes)...以上就是如何使用MFC自绘控件实现竖排TAB sheet控件的详细步骤,以及可能涉及到的相关知识点。通过这个过程,开发者可以更好地理解和掌握MFC中的控件自定义及事件处理机制。

    jquery竖排的TAB导航插件.rar

    标题中的“jquery竖排的TAB导航插件.rar”是指一个基于jQuery库的,用于创建垂直排列的TAB导航栏的插件。这个插件是专门为网页设计者和开发者准备的,旨在提供一种高效、灵活的方式来组织和展示网站内容。在网页设计...

    JQuery Tab_JQuery竖排选项卡代码示例

    在这个“JQuery Tab_JQuery竖排选项卡代码示例”中,我们将探讨如何利用JQuery 1.4.4实现垂直排列的选项卡功能。 首先,让我们了解JQuery的基本用法。JQuery通过$函数作为入口,允许开发者选择HTML元素并对其进行...

    jQuery+CSS3竖排手风琴tab代码

    【jQuery+CSS3竖排手风琴tab代码详解】 在网页设计中,Tab导航是一种常见的交互元素,它能有效地组织和展示内容。本教程将详细讲解如何利用jQuery和CSS3技术实现一款蓝色风格的竖排手风琴式Tab选项卡,具有鼠标点击...

    tab选项卡竖排

    完全仿照天猫网站实现的各种jquery前台特效,各个模块下载。 完全仿照天猫网站实现的各种jquery前台特效,各个模块下载。

    arcgis maplex竖排文字

    本文将详细介绍如何使用ArcGIS Maplex实现竖排文字的操作。 首先,确保你已经安装了包含Maplex扩展的ArcGIS Desktop版本,因为竖排文字的功能是Maplex的一部分。未安装Maplex的用户需要先通过ArcGIS Desktop的...

    WPF TAB页 竖向字体显示

    在Windows Presentation Foundation (WPF) 中,开发人员可以创建丰富的用户界面,包括各种控件,如TabControl。在本主题中,我们将深入探讨如何在WPF TabControl中实现竖向字体显示,使得标签页的标题从上至下排列,...

    文字竖排编辑器

    【文字竖排编辑器】是一种特别的文本编辑工具,它不同于传统的横排文本,而是将文字按照垂直方向进行排列。这种编辑器在某些特定场景下非常有用,比如书法排版、古籍整理或是艺术设计等领域。本文将详细介绍该编辑器...

    竖排按钮显示

    "竖排按钮显示" 是一种特殊的布局方式,它使按钮的文字按照垂直方向排列,而不是默认的水平排列。这种布局通常用于有限的空间或者为了设计独特、有吸引力的用户界面。在本文中,我们将深入探讨如何在WPF中实现竖排...

    文本框文字竖排

    当我们谈论“文本框文字竖排”时,我们指的是将原本水平排列的文本调整为垂直方向显示,这种布局方式在中国传统文本中尤为常见,如古籍、书法作品等。在现代数字设计中,竖排文本也有其独特的应用场景,比如在创建...

    HTML竖排菜单制作

    在制作竖排菜单时,我们通常会使用`&lt;ul&gt;`(无序列表)和`&lt;li&gt;`(列表项)标签来构建菜单的基础框架。例如: ```html &lt;li&gt;&lt;a href="#"&gt;菜单1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;菜单2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#"&gt;菜单3...

    竖排文字编辑

    竖排汉字编辑的类。可以在文本框中生成竖排的文字。

    竖排古文(论坛发帖好助手)

    综上所述,【竖排古文(论坛发帖好助手)】在传统文化与现代科技之间搭建起了一座桥梁,它不仅让追求复古风格的用户能轻易实现竖排古文的排版,同时提升了论坛文章的艺术感和阅读体验,更是对传统文化的一种传承与...

    关于qtabWidget tab竖写方式

    QTabBar::tab:selected, QTabBar::tab:hover { background-color: #e5e5e5; /* 选中或悬停时的背景颜色 */ } ``` 最后,如果你的项目使用了QTabWidget的子类或者需要更复杂的定制,你可能需要重载`paintEvent()`或`...

    android利用Paint在Canvas上实现竖排写字

    - 可以通过设置Paint的`paint.setTextAlign(Paint.Align.RIGHT)`使文本右对齐,再配合`canvas.translate()`方法改变画布的坐标原点,使得每次绘制文本时都会向左移动一定的距离,从而达到竖排的效果。 4. **步骤...

    Java输出竖排古典文字

    在Java编程中,实现竖排古典文字的输出是一项有趣且具有挑战性的任务。这涉及到字符的排列方式,以及如何在控制台或者图形用户界面中展示这些文字。在给定的【标题】"Java输出竖排古典文字"中,我们可以推测这篇博文...

    竖排古文软件V1.1中文免费绿色版

    软件的界面设计简洁易用,用户只需通过简单的几步操作即可完成文本转换。首先,用户需要准备好需要转换的文本文件,可以是纯文本文件或是其他文档格式。接着,打开竖排古文软件,导入文本文件,软件会自动进行识别和...

    excel表格如何把横排变成竖排.doc

    Excel表格中文字竖排和横排的转换技巧 Excel表格中,文字竖排和横排的转换是非常常见的操作。今天,我们将分享三种不同的方法来实现文字竖排和横排的转换。 方法一:利用文字方向来实现竖排 在Excel中,用户可以...

    A4对折WORD竖排小册子模板

    A4对折WORD竖排小册子模板。A4页面以word排版设计,仿古籍文字竖排,自右向左阅读。一页分左右两版,页码自动变化。配上适合古书用的字体,可打印仿古书籍阅读。

    易语言源码竖排古文转换器易语言源码.rar

    易语言源码竖排古文转换器易语言源码.rar 易语言源码竖排古文转换器易语言源码.rar 易语言源码竖排古文转换器易语言源码.rar 易语言源码竖排古文转换器易语言源码.rar 易语言源码竖排古文转换器易语言源码.rar ...

Global site tag (gtag.js) - Google Analytics