<!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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>佐佐制造---选项卡secBoard</title>
<script type="text/javascript">
</script>
<style type="text/css">
/* Reset style */
* { margin:0; padding:0; word-break:break-all; }
h1, h2, h3, h4, h5, h6 { font-size:1em; }
a { color:#333; text-decoration:none; }
a:hover { text-decoration:underline; }
ul, li { list-style:none; }
fieldset, img { border:none; }
/* Hotnews style */
#hotnews { margin:100px; }
#hotnews_caption {overflow:hidden; border-bottom:3px solid #C2130E; }
#hotnews_caption ul { float:left; }
#hotnews_caption ul li { float:left; border-right:3px solid #FFF; width:50px; line-height:25px; text-align:center; cursor:pointer; }
#hotnews_caption .normal { background:#CCC; }
#hotnews_caption .current{ background:#C2130E; color:#FFF; }
#hotnews_content {}
#hotnews_content .normal { display:none; }
#hotnews_content .current { display:block; }
#hotnews_content ul { padding:8px 0 0 5px; }
#hotnews_content ul li a { font-size:14px; }
</style>
<script type="text/javascript">
function secBoard(elementID,listName,n) {
var elem = document.getElementById(elementID);
var elemlist = elem.getElementsByTagName("li");
for (var i=0; i<elemlist.length; i++) {
elemlist[i].className = "normal";
var m = i+1;
document.getElementById(listName+"_"+m).className = "normal";
}
elemlist[n-1].className = "current";
document.getElementById(listName+"_"+n).className = "current";
}
</script>
</head>
<body bgcolor="white">
<div id="hotnews">
<div id="hotnews_caption">
<ul>
<li class="current" onclick="secBoard('hotnews_caption','list',1);">新闻</li>
<li class="normal" onclick="secBoard('hotnews_caption','list',2);">火炬</li>
<li class="normal" onclick="secBoard('hotnews_caption','list',3);">图片</li>
<li class="normal" onclick="secBoard('hotnews_caption','list',4);">锐点</li>
</ul>
</div>
<div id="hotnews_content">
<div class="current" id="list_1">
<ul>
<li><a href="#">[新闻]轿车逆行撞死斑马线上7岁后逃逸</a></li>
<li><a href="#">[新闻]乌鲁木齐警方抓捕疑犯遭暴力</a></li>
<li><a href="#">[新闻]河南驻马店警方配备宝马警车领导开道</a></li>
</ul>
</div>
<div class="normal" id="list_2">
<ul>
<li><a href="#">[火炬]轿车逆行撞死斑马线上7岁学后逃逸</a></li>
<li><a href="#">[火炬]网友创作歌曲"人民心疼你"表达理敬意</a></li>
<li><a href="#">[火炬]河南驻马店警方配备宝马警车</a></li>
</ul>
</div>
<div class="normal" id="list_3">
<ul>
<li><a href="#">[图片]轿车逆行撞死斑马线上7岁学童后逃逸</a></li>
<li><a href="#">[图片]网友创作歌曲"人民心疼你"总理敬意</a></li>
<li><a href="#">[图片]河南驻马店警方配备宝马警车 为领导开道</a></li>
</ul>
</div>
<div class="normal" id="list_4">
<ul>
<li><a href="#">[锐点]轿车逆行撞死斑马线上7岁学童后逃逸</a></li>
<li><a href="#">[锐点]阿拉伯媒体称赖斯正与卡扎菲长子热恋</a></li>
<li><a href="#">[锐点]河南驻马店警方配备宝马警车导开道</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>
分享到：
相关推荐
在网页设计中，jQuery选项卡模板是一种常见的交互元素，它能有效地组织和展示大量信息，提升用户体验。"jquery选项卡模板"就是一种基于jQuery库实现的这种功能的代码模板。这个模板利用JavaScript和CSS，创建了一个...
html5 svg+css3 15种制作的超酷响应式tab选项卡模板源码，HTML5模板源码各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。别再犹豫了，一起加入这个源码的世界吧！博主提供各种支持，欢迎...
在这个“rnStoryBook:React原生StoryBook 2选项卡模板”中，我们看到的是一个专门为React Native组件设计的StoryBook配置，包含了两个选项卡，这将有助于开发者更好地组织和浏览组件。 React Native是Facebook推出...
在选项卡模板中，可能利用和元素来构建主要的导航区域，而则用于承载每个选项卡下的具体内容。 模板可能包含CSS3的使用，CSS3是CSS的最新版本，提供了更多的样式选择器和动画效果。例如，可以使用伪类选择器如`:...
此资源提供的是一个基于微信小程序的滑动选项卡模板，包含JS代码，适用于前端开发。 微信小程序是腾讯公司推出的一种轻量级应用开发平台，它允许开发者通过特定的开发工具和语言（WXML、WXSS和JavaScript）构建原生...
"简单的jquery tab选项卡切换代码样式"是指利用jQuery实现的一种常见用户界面元素——选项卡（Tab）的交互功能。选项卡是网页设计中常用的布局方式，它可以有效地组织和展示大量内容，提高用户体验。下面我们将详细...
总结来说，"滑动选项卡.zip"是一个针对微信小程序的滑动选项卡模板，包含实现这一功能所需的各种代码和资源文件。通过学习和使用这个模板，开发者可以快速理解和实践微信小程序中滑动选项卡的实现，提高开发效率，并...
《构建基于Ionic框架的“我的应用”选项卡模板》 在移动应用开发领域，Ionic框架以其强大的跨平台能力和丰富的UI组件库，深受开发者喜爱。本文将深入探讨如何使用Ionic框架创建一个具有选项卡模板的“我的应用”...
这是一款效果非常炫酷的HTML5 SVG和jQuery垂直选项卡布局特效。该选项卡布局将tabs垂直排列在左侧，每个Tab都使用SVG来制作图标，当用户切换Tab时，旧的选项卡往上移动，新的选项卡从上面往下移动，效果非常酷。
用户信息选项卡网页模板是一种常见的网页设计模式，用于组织和展示用户的相关数据。在网站中，用户信息通常包括登录信息、个人资料、设置等，这些信息通过选项卡的形式呈现，可以使得页面布局清晰，用户体验更佳。...
输入密码验证进入系统效果ppt模板，验证密码加载loading效果，tab选项卡web菜单效果ppt模板。
立体切换登录表单选项卡网页模板是一种现代网页设计技术，旨在提供更加直观、交互性强的用户体验。这种模板通常包括多个选项卡，每个选项卡代表不同的登录方式或信息输入界面，用户可以通过点击选项卡在不同页面间...
在提供的文件列表中，"tabbed_pages.html"可能是包含选项卡组件的HTML模板文件，它可能包含了JavaScript和CSS引用，以及用于展示选项卡内容的HTML结构。"tabbed_pages"文件可能是JSP源代码，其中包含了服务器端逻辑...
本篇文章将详细探讨如何利用Element UI 的选项卡（Tab）组件来创建多种样式的标签选项卡，包括基础用法、样式定制、卡片化、位置调整以及自定义标签页和动态增减标签页。 1. **基础用法**： Element UI 的`...
在网页设计中，选项卡（Tab）是一种常见的用户界面元素，它允许用户在有限的空间内切换查看多个独立的内容区域。本教程将详细讲解如何使用JavaScript来制作可自定义的选项卡，实现一个页面上显示多个窗口的效果。 ...
本示例将介绍如何利用C#编程实现一个按钮控制的选项卡功能，使得用户可以通过点击按钮在不同的窗体或面板之间切换。这种功能常见于许多软件界面中，为用户提供多任务并行或者逐步操作的界面布局。 首先，我们需要...
在这个"微信小程序-滑动选项卡.zip"压缩包中，包含了一个关于滑动选项卡的小程序模板代码。模板代码通常是为了简化开发流程而预先编写的可复用代码，开发者可以快速引入并根据自己的需求进行调整。尽管直接粘贴复制...
### PA网站模板——TAB选项卡制作详解 #### 一、背景与目的 在现代网站设计中，为了提高用户体验和页面的美观度，TAB选项卡是一种非常实用的设计元素。它不仅可以让用户快速地在不同的内容板块之间切换，还能帮助...
这个"简单实用的Bootstrap选项卡效果"教程将引导你了解如何利用Bootstrap的选项卡组件创建交互式的用户界面。选项卡在网页设计中非常常见，它们允许在有限的空间内展示大量信息，同时保持页面整洁和易于导航。 ...
选项卡是网页设计中常用的一种交互元素，它允许用户在一个固定的空间内切换多个视图，提高页面的组织性和可读性。在ASP.NET中，我们可以使用多种技术来创建选项卡，包括服务器控件、客户端脚本和混合方法。 1. **...