随手笔记，标签切换

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>切换</title>
<style type="text/css">
*{
padding:0;
margin:0;
list-style: none;
}
.nav{
height:50px;
width:1000px;
border-top:2px solid #000;
line-height:50px;
text-align:center;
font-size:20px;
font-weight:700;
margin:100px auto;
}
.nav_list{
float:left;
width:198px;
height:50px;
border:1px solid #ddd;
border-top:none;
background-color:#fff;
color:#000;
cursor:pointer;
}
.nav_hover{
background-color:#000;
color:#fff;
width:198px;
height:50px;
border:1px solid #000;
float:left;
cursor:pointer;
position:relative;
}
.nav_hover span{
width:0;
height:0;
border:10px solid transparent;
border-top:10px solid #000;
border-top-color:inherit;
border-bottom:none;
position:absolute;
bottom:-10px;
left:50%;
margin-left:-10px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
$(".nav_list").hover(function(){
$(this).addClass("nav_hover").siblings().removeClass("nav_hover");
})
})
</script>
</head>
<body>
<div class="nav">
<ul>
<li class="nav_list nav_hover">美容护肤<span></span></li>
<li class="nav_list">彩妆工具<span></span></li>
<li class="nav_list">身体护理<span></span></li>
<li class="nav_list">魅力香薰<span></span></li>
<li class="nav_list">男士护肤<span></span></li>
</ul>
</div>
</body>
</html>

时间： 2024-10-22 07:47:20

随手笔记，标签切换的相关文章

搞定tab标签切换效果

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>搞定tab标签切换效果</title><style>*{ margin:0; padding:0;list-style: none;}body {font:12px/1.5 Tahoma;}#big{border: 1px solid b

分享jQuery&amp;CSS3导航标签切换效果

jquery+css3完成的菜单导航特效 引入代码: <link rel="stylesheet" type="text/css" href="css/style.css"/> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="t

【锋利的JQuery-学习笔记】切换网页皮肤-且保存于Cookie

切换网页皮肤: html片段: <head> <link rel="stylesheet" href="styles/skin/skin_0.css" type="text/css" id="cssfile" /> </head> <ul id="skin"> <li id="skin_0" title="蓝色"

实例：jQuery实现标签切换

具体实现效果如图: 原理很简单,就是监听鼠标滑动和点击事件.在第一个标签切换的示例中,当鼠标滑过某个标签时,就把class转移到当前标签.这里用到的jQuery方法主要是each()确定当前是哪一个标签,确定好以后,在设置鼠标的mouseover和mouseout事件.即: /** * Created by Administrator on 2016/7/30. */ $(document).ready( $("#tabFirst li").each(function(index){

webseal和portal的单点登录随手笔记

两个影响深刻的点: 1.对于portal群集结构,在DM上生成LTPA即可.通过首选项勾选同步至各个节点的选项把配置同步下去. 2.网上有很多详细配置文档,结果最后我自己配置下来还是未能成功,晚上领导带着一起调试只留下一台portal一台ihs从头在webseal开始测试整个过程.发现从ihs能访问/wps/mypotal而从webseal不能,查看日志发现ihs访问/wps/myportal会先重定向为/wps/redirect,接着就重定向为/wps/portal并生成cookie信息,而w

Axure RP Pro 7.0苏宁易购式标签切换效果教程

转:http://jingyan.baidu.com/article/7082dc1c4f0a11e40a89bdac.html 页面标签切换效果,几乎是所有大网站(尤其是电商类网站)标配的交互方式: 之所以应用如此普遍,关键在于网站首屏展示区,是寸土寸斤的黄金区域:标签切换可以让更多内容在同一块地方展示:相当于两块同样面积的地皮,一个盖平房,一个盖楼房,土地利用率自然不可同日而语: 本教程是仿造苏宁易购网站标签切换效果,为了就是切合实际,让你能将Axure技术与最前沿的应用场景结合起来,当你需

jQuery蓝色修边tab标签切换

jQuery蓝色修边tab标签切换,jQuery,tab选项卡,标签切换,jQuery蓝色修边tab标签广告代码切换是一款非常简单实用tab选项卡切换效果,自己定义好相关的html标签即可,选项卡切换流畅,切换过程带有渐变效果素材免费下载. http://www.huiyi8.com/sc/6954.html

每天一个JavaScript实例-tab标签切换

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>每天一个JavaScript实例-tab标签切换</title> <style> .tabcontainer{ padding:5px; width:500px; marg

(1) 标签切换界面

一.代码部分 1.最简单:FragmentTabHost + Fragment http://download.csdn.net/detail/mountain3th/7630123 2.略复杂:TabHost + Fragment http://download.csdn.net/detail/mountain3th/7630383 3.变形:Button + Fragment http://download.csdn.net/detail/mountain3th/7630181 4.升级版:

CSS+JS实现tab标签切换

实现tab标签切换比较简单,下面先看看我实现的效果: 我主要实现了: 1.tab之间的相互切换: 2.显示选中的tab 下面看看实现代码: css: html,body,div{ font-size: 12px; font-family:"Arial"; } .tab-ui{ width: 400px; height: 300px; position: relative; } .tab-title{ border-top-right-radius:8px; float: left; b