`
hxy-go
  • 浏览: 39082 次
  • 性别: 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输出竖排古典文字"中,我们可以推测这篇博文...

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

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

    A4对折WORD竖排小册子模板

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

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

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

    css实现文字竖排效果.rar

    本教程将详细介绍如何使用CSS实现文字竖排效果。 首先,我们可以使用`writing-mode`属性来改变文本的书写方向。这个属性允许我们将文本从左到右(默认的`lr-tb`),改为从右到左(`rl-tb`),或者从上到下(`tb-rl`...

Global site tag (gtag.js) - Google Analytics