利用CSS和JavaScript实现网页栏目的选择 - - ITeye博客

`

eggbucket1

浏览: 78348 次
性别:
来自: 苏州

最近访客更多访客>>

jiangcon

心杀心

z137384812

lwhwhy

博主相关

博客

微博

相册

收藏

留言

关于我

文章分类

全部博客 (133)

社区版块

存档分类

最新评论

lgclove1314：请问：import org.tempuri.ArrayOfSt ...
XFire调用Web服务取得天气预报
Xgw123485：很强大呀！
铸造JavaWeb利器
littleJava：写的很详细
JDK5.0新特性Annotation之@Retention注解

利用CSS和JavaScript实现网页栏目的选择

阅读更多

<style>  </style> <body> <div id="tab"> <h3 onClick="go_to(1)">选择一</h3> <h3 onClick="go_to(2)">选择二</h3> <h3 onClick="go_to(3)">选择三</h3> <h3 onClick="go_to(4)">选择四</h3> <h3 onClick="go_to(5)">选择五</h3> <div class="block"> <ul> <li><a href="#">11111111111</a></li> <li><a href="#">11111111111</a></li> <li><a href="#">11111111111</a></li> <li><a href="#">11111111111</a></li> <li><a href="#">11111111111</a></li> <li><a href="#">11111111111</a></li> <li><a href="#">11111111111</a></li> <li><a href="#">11111111111</a></li> <li><a href="#">11111111111</a></li> <li><a href="#">11111111111</a></li> <li><a href="#">11111111111</a></li> <li><a href="#">11111111111</a></li> </ul> </div> <div> <ul> <li><a href="#">22222222222</a></li> <li><a href="#">22222222222</a></li> <li><a href="#">22222222222</a></li> <li><a href="#">22222222222</a></li> <li><a href="#">22222222222</a></li> <li><a href="#">22222222222</a></li> <li><a href="#">22222222222</a></li> <li><a href="#">22222222222</a></li> <li><a href="#">22222222222</a></li> <li><a href="#">22222222222</a></li> <li><a href="#">22222222222</a></li> <li><a href="#">22222222222</a></li> </ul> </div> <div> <ul> <li><a href="#">33333333333</a></li> <li><a href="#">33333333333</a></li> <li><a href="#">33333333333</a></li> <li><a href="#">33333333333</a></li> <li><a href="#">33333333333</a></li> <li><a href="#">33333333333</a></li> <li><a href="#">33333333333</a></li> <li><a href="#">33333333333</a></li> <li><a href="#">33333333333</a></li> <li><a href="#">33333333333</a></li> <li><a href="#">33333333333</a></li> <li><a href="#">33333333333</a></li> </ul> </div> <div> <ul> <li><a href="#">44444444444</a></li> <li><a href="#">44444444444</a></li> <li><a href="#">44444444444</a></li> <li><a href="#">44444444444</a></li> <li><a href="#">44444444444</a></li> <li><a href="#">44444444444</a></li> <li><a href="#">44444444444</a></li> <li><a href="#">44444444444</a></li> <li><a href="#">44444444444</a></li> <li><a href="#">44444444444</a></li> <li><a href="#">44444444444</a></li> <li><a href="#">44444444444</a></li> </ul> </div> <div> <ul> <li><a href="#">55555555555</a></li> <li><a href="#">55555555555</a></li> <li><a href="#">55555555555</a></li> <li><a href="#">55555555555</a></li> <li><a href="#">55555555555</a></li> <li><a href="#">55555555555</a></li> <li><a href="#">55555555555</a></li> <li><a href="#">55555555555</a></li> <li><a href="#">55555555555</a></li> <li><a href="#">55555555555</a></li> <li><a href="#">55555555555</a></li> <li><a href="#">55555555555</a></li> </ul> </div> </div> </body> <script>  </script>

分享到：

带有随机验证码的登录页面 | 利用DIV和CSS修饰简易表单

2010-09-05 21:49
浏览 489
评论(0)
查看更多

评论

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

基于Html+css+js实现的静态购物网站: 2.添加并设计网站导航栏(导航栏目内容和样式自定)，链接为空链接； 3.添加并设计商品轮播图，图片、位置、大小等自定义; 4.设计商品分类展示效果(样式自定义)，每件商品必须有：商品名称、图片、价格内容；商品数目...

JavaScript课程设计实训大作业：购物网站（含源代码+运行截图+实训报告）: 基本功能：网站显示商品分类和商品信息，提供搜索商品、浏览商品...网页的模块主要由主页、栏目页、商品详情页、轮播页、个人信息登录页面、秒杀页、购物车、注册和登录、咨询跳转到微信和QQ页、流动广告、弹窗广告等

静态网页设计-奥迪官网（HTML+CSS+JavaScript）: ③网页制作过程中使用的主要技术和方法（如：用什么方法布局、有什么特点及优势，网页中使用的JavaScript网页特效等）。分块布局，内容清楚，美观大方，利用了JavaScript的焦点轮播图适用人群：需要用来学习使用和...

左侧多级子栏目纯JavaScript: "左侧多级子栏目纯JavaScript"是一种常见的网页设计模式，它主要用于实现左侧展示的多级导航菜单，使得用户能够方便地浏览和访问网站的深度内容。这个设计模式完全基于JavaScript实现，不依赖于其他服务器端技术或库...

实现栏目点击的一个切换效果非常实用: 接下来，我们利用CSS来设置默认状态和选中状态。默认情况下，所有栏目都是隐藏的，只有当用户点击时才会显示。我们可以使用伪类`:hover`和`:active`来实现简单的交互，但这里更常见的是使用JavaScript来改变状态。...

静态网站,DIV+CSS布局: 使用CSS+DIV布局，开发者可以实现更灵活和精确的网页设计，使页面元素按照预设的方式排列和对齐。在描述中提到的“公告”、“登录”和“最新消息”等栏目，这些通常是静态网站中的常见功能。公告栏可能是一个包含...

css3点击按钮左侧菜单收缩展出滑动特效: 在网页设计领域，CSS3（层叠样式表第三版）为开发者提供了丰富的动画效果和交互设计能力。"css3点击按钮左侧菜单收缩展出滑动特效"是一个常见的网页交互设计，通常用于实现用户友好的导航菜单。这个特效允许用户通过...

HTML技术有css javascript: 可以看到，页面中有多个栏目，多条新闻等，最上方不同的栏目就是文字链接。链接标记虽然在网站设计制作中占有不可替代的地位，但是其标记只有一个，那就是标记。本站介绍的链接应用都是基于标记基础上的。链接...

鼠标滑过栏目CSS3动画特效.zip: "鼠标滑过栏目CSS3动画特效"是一个典型的利用CSS3实现的交互式设计，它为网页的栏目添加了丰富的视觉体验，当用户鼠标悬停在栏目上时，栏目会触发预设的动画效果。这个资源"鼠标滑过栏目CSS3动画特效.zip"可能包含...

div+css+js 滚动式图片栏目: JavaScript是实现网页动态效果的关键，它允许我们与用户交互、改变网页内容和行为。在滚动式图片栏目中，JS常用于： - 数据驱动：将图片数据存储在JavaScript对象中，动态生成或更新图片元素。 - 事件监听：通过`...

足球游戏网页模板是一款炫酷多彩的css3足球主题网页模板下载 .rar: 3. **特色功能区**：可能包含“热门游戏推荐”或“热门话题讨论”，利用CSS3的滑动、淡入淡出等效果增加互动性。 4. **侧边栏**：可以提供广告位、社交媒体链接、最近文章或热门文章列表，增加网站的交互性和粘性。...

cms项目第二部分_实现了栏目管理和权限_源码: 综上所述，这个CMS项目通过DWR和Spring框架实现了前后端交互，利用Hibernate处理数据库操作，且在第二阶段着重实现了栏目管理和权限控制，为用户提供安全、便捷的内容发布和管理环境。各个模块分工明确，形成了一个...

javascript+div实现多菜单切换: 在本篇文章中，我们将深入探讨如何利用JavaScript和HTML的div元素来实现这样的功能。首先，`div`元素在HTML中是一个通用容器，它没有特定的语义，但可以用来组织页面结构和样式。通过CSS，我们可以为`div`设置不同...

css_网页设计报告.pdf: 本报告将详细介绍如何利用CSS+DIV技术来设计一个美观、功能完善的个人博客。 1. **前言** 博客作为个人在线表达和交流的平台，具有极高的个性化需求。通过CSS，用户可以自定义博客的样式，展示个人风格。本报告的...

魅族导航条特效，jqueryui菜单栏目导航，javascript特效: 【JavaScript特效】是利用JavaScript语言来实现网页的动态效果。在魅族导航条中，JavaScript可能被用来处理用户的交互事件，如鼠标悬停、点击等，以及动态改变导航条的状态，如高亮当前选中的菜单项，或者执行复杂的...

javascript栏目树形导航: JavaScript栏目树形导航是一种在网页中实现层次结构展示的交互方式，常用于网站的目录导航、文件管理系统或者组织复杂的数据结构。在这个特定的案例中，我们提到的是"dtree"，这很可能是一个JavaScript库或者插件，...

网页左栏目右栏目相互移动，全部移动，单个移动，置顶，置底，向上向下: 总的来说，"网页左栏目右栏目相互移动"涉及了HTML结构设计、CSS布局（特别是Flexbox）和JavaScript交互。通过熟练掌握这些技术，开发者可以创建出灵活且用户友好的多栏网页，同时实现栏目的自由移动、置顶和置底功能...

漂亮的花色背景二栏css3博客模板6125.zip: CSS3是层叠样式表的第三版，它引入了许多新特性和功能，如新的选择器、边框和背景的高级处理、动画和过渡效果、多列布局以及媒体查询等，使得网页设计更加丰富和动态。描述中提到“适合于前端新人”，这意味着这个...

Global site tag (gtag.js) - Google Analytics