高手简论:说说标签切换应用原则

在国内的主流网站中,自从网易首页率先采用Tab标签切换以后,标签切换的应用“忽如一夜春风来,千树万树梨花开”到处都是了。

标签切换的应用原则:

在页面中有限的重要位置里,可以呈现给用户更多的重要内容;

标签切换的实现方式:

1、通过Ajax+CSS点击或鼠标经过才下载切换的内容;

2、通过简单的JS+层的隐藏、显示来实现。这种方式其实load页面时是所有内容

已经下载在浏览器里,只是当没有切换过去的时候,没有显示而已。

标签切换的触发方式有鼠标点击和鼠标经过两种最常用的。

一般来说,在标签切换不应该出现嵌套,这样会让人很晕,如果里跟外的触发方式不一样的就更晕了,这样有可能要用户用起来提心吊担一样,还有在一个页面里,标签切换的触发方式最好保持一致。

让我困惑的是,现在很多页面动不动就用切换,好像不用切换就落伍一样,切换的个数简直可以说是泛滥成灾了。

时间: 2024-11-08 19:10:03

高手简论:说说标签切换应用原则的相关文章

js实现的tab标签切换效果代码分享_javascript技巧

这是一款基于js实现的tab标签切换效果,是一款无需jQuery,原生javascript制作的tab切换效果源码.点击上面的标题即可实现对应页面的切换功能,非常具有实用价值. 运行效果图:-------------------查看效果 下载源码------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js实现的tab标签切换效果代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Trans

CSS网页设计实例:商旅网首页的标签切换

文章简介:CSS网页设计实例:商旅网首页的标签切换. 上个月的项目了...标签切换有很多方法可以实现,这里贴一段我个人很喜欢用的代码: <ul class="tabmenu"><li class="menu_flt">机票</li>< li>酒店</li>< li>旅游度假</li>< /ul> 对于web标准化来讲,这种结构很清晰,当图片未显示的时候同样可以知道文本内容

Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)_javascript技巧

在Bootstrap下载与安装后,可以在D:\Program Files\nodejs\node_modules\bootstrap\js中找到12个JS文件,这些JS文件是Bootstrap自带的12个jQuery插件,也可以在D:\Program Files\nodejs\node_modules\bootstrap\dist\js中找到bootstrap.js和bootstrap.min.js,这两个文件都包含12个jQuery插件.  在这12个jQuery插件中,最常用的有图片轮播ca

v4包-tab标签切换时Fragment相关问题

问题描述 tab标签切换时Fragment相关问题 各位请看,我在第一张图片里写到了(<===看这里,看这里的那行)创建了一个方法,参数如图,之后新建方法如图2所示,在这个方法中我将参数FragmentTransaction改为了V4下的,但是在if语句中,hide却还是FragmentTransaction,程序一直报错. 解决方案 你看看你的Fragment是android.support.v4.app里的还是android.app里的 解决方案二: 第二张图在哪?应该是两个fragment

html5 video标签切换视频问题

问题描述 html5 video标签切换视频问题 现在想实现这么一个功能: html5 video标签在播放视频过程中,点击按钮切换到另一个视频资源,并跳到上一个视频的时间点. 比如,A视频播放到3分15秒,点击某一个按钮后,播放B视频,且从4分15秒开始播. 不知道为什么,PC上没有问题,可以正常跳转.但是移动端就会出问题,尤其是安卓客户端,都是从头开始播. 求大神解救! 以下是部分代码: <video id=""my_video_id"" class=&q

c# 点击标签 切换窗体

问题描述 想问下,怎样在windows窗体中实现标签式的效果,就是通过点击上面的标签切换下面窗体的内容,就像qq那样?望提示 解决方案 解决方案二:tabControl控件.解决方案三:tabControl控件.==============正解

jQuery实现的tab标签切换效果示例_jquery

本文实例讲述了jQuery实现的tab标签切换效果.分享给大家供大家参考,具体如下: <!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"> <

javascript-Web标签切换效果出不来,大神救命

问题描述 Web标签切换效果出不来,大神救命 想用JS写标签切换的效果, 之前也写过标签切换的效果,但不知道为什么这次出不来.找了很久,将代码改了又改,仍找不到错误.求大神救命 以下是缩减了无数次的代码...(为的是像以前写过的靠拢,然而还是出不来...) 主要就是想知道我的代码里哪里错了... <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="

fragmentactivity-FragmentActivity下的FragmentTabHost,标签切换显示问题

问题描述 FragmentActivity下的FragmentTabHost,标签切换显示问题 FragmentActivity下通过FragmentTabHost 添加了tab1.tab2两个标签页,点击tab1 打开fragment1,点击tab2打开fragment2,然后在fragment1下有一个按钮,点击按钮打开一个新的fragment3,怎么保证在fragment1的位置显示fragment3的内容?,我通过替换fragment3的内容显示了,但是当我再次点击tab2标签的时候,会