有用好看的CSS+JS+table 导航
预览效果图
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="">
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
.tab{
border:0px solid #000000;
width:98%;
height:50px;
background:#000000;
}
.taby{
display:none;
}
.tabx{
text-align:center;
border:0px solid #000000;
width:98%;
height:30px;
background:#999999;
display:block;
} .tabx span{
font-size:14px;
color:#ffffff;
font-family:"黑体";
font-weight:500;
text-align:center;
margin:3px 10px;
} .tab tr{
font-size:15px;
color:#ffffff;
font-family:"黑体";
font-weight:600;
}
.xstd{
border:0px solid #000000;
font-size:15px;
color:#000000;
font-family:"黑体";
font-weight:600;
background:#999999; }
.lk{
font-size:15px;
color:#ffffff;
font-family:"黑体";
font-weight:600;
background:#000000;
} </style>
<script>
function xz(id){
for(var i=1;i<=6;i++){
document.getElementById("td"+i).className="lk";
}
document.getElementById("td"+id).className="xstd";
if(id == '2'){
document.getElementById("xianshi").className="tabx";
var html="<span style=\"cursor:pointer;\" onclick=\"accp()\">外包业务</span><span style=\"cursor:pointer;\">外包业务</span><span style=\"cursor:pointer;\">外包业务</span>";
document.getElementById("xzt").innerHTML=html;
}else{
document.getElementById("xianshi").className="taby";
}
}
function accp(){
alert("敬请期待!");
}
</script>
</head> <body> <center><table class="tab" cellspacing=0 cellpadding=0 >
<tr align="center">
<td width="150px"> </td>
<td width="80px" style="cursor:pointer;" class="xstd" onclick="xz('1')" id="td1" >首页</td>
<td width="80px" style="cursor:pointer;" onclick="xz('2')" id="td2">公司业务</td>
<td width="80px" style="cursor:pointer;" onclick="xz('3')" id="td3">公司概况</td>
<td width="80px" style="cursor:pointer;" onclick="xz('4')" id="td4">公司成就</td>
<td width="80px" style="cursor:pointer;" onclick="xz('5')" id="td5">联系方式</td>
<td width="80px" style="cursor:pointer;" onclick="xz('6')" id="td6">等待上线</td>
<td> </td>
</tr>
</table></center> <center><table class="taby" id="xianshi">
<tr >
<td id="xzt" align="center" width="800px" ></td>
</tr>
</table></center>
</body>
</html>
有用好看的CSS+JS+table 导航的更多相关文章
- css+js实现自动伸缩导航栏
用css+js实现自动伸缩导航栏 需要达到的效果: 默认首页选中样式 设置鼠标滑过效果:颜色变化(#f60),宽度变化,字体变化 所涉及的知识点: 布局:float css: 元素状态切换(displ ...
- CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...
- HTML/CSS/JS编码规范
最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签 ...
- 前端工程师面试问题归纳(一、问答类html/css/js基础)
一.参考资源 1.前端面试题及答案整理(一) 2.2017年前端面试题整理汇总100题 3.2018最新Web前端经典面试试题及答案 4.[javascript常见面试题]常见前端面试题及答案 5.W ...
- 前端小白页面开发注意事项及小工具(html\css\js)
技术一直在向前发展.但是有一些是相通的,要找准重点,将80%的时间放在提升基础问题上,余下的20%再去学习框架,库和工具. HTML 1. HTML 属性应当按照以下给出的顺序依次排列,确保代码的易读 ...
- html中使用js+table 实现分页
本文在html中利用js+table实现分页.主要思想是先对table中的所有数据隐藏,然后通过当前页面(currPageNum)来计算当前页要显示的行,并显示出来,首页.下一页.上一页.尾页都依此来 ...
- html+css+js实现复选框全选与反选
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- 【源码分享】jquery+css实现侧边导航栏
jquery+css实现侧边导航栏 最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看 ...
- 认识大前端html+css+js
认识大前端:前端就是将效果图生成网页,利用html+css+js等技术. 如果把前端比作一台汽车,那么html就是车的骨架,css就是完整的车的模型,而js就充当着车的发动机... 建议: 刚刚开 ...
随机推荐
- LR之Java虚拟用户
1.认识Java虚拟用户 2.Java虚拟用户的适用范围
- ansible官方文档翻译之变量
Ansible变量 在使用ansible变量的时候,主要是因为各个系统的不同,从而需要使用不同的变量来进行设置,例如在设置一些配置文件的时候,有大部分内容是相同的,但是一部分内容是和主机的ip地址或者 ...
- WebApi参数传递
c# webapi的参数传递方式:1.查询字符串(query string):2.内容主体(content body) 当然也有cookie或url部分或头部信息(header)等其它传方式,这里仅讨 ...
- 使用JavaMail API发送邮件
发送邮件是很常用的功能,注册验证,找回密码,到货通知,欠费提醒等,都可以通过邮件来提醒. Java中发送邮件需要使用javax.mail.jar包,读者可以上网搜索或去官方下载,下载地址为: 下面贴上 ...
- Hadoop 问题 & 解决
1.将旧版本hadoop升级后,如从hadoop-1.1.2升级到hadoop-1.2.1,会发现使用start-all.sh命令,没有办法启动namenode,即jps,发现没有namenode 原 ...
- NServiceBus教程-持久化配置
当配置在NServiceBus v5持久性,秩序是非常重要的.最后赢得持久性配置选项.我们看看一些例子. 示例1 在本例中最后一个配置选项将会覆盖前面的所有选项. v5.2 v5.0 编辑 var c ...
- Quora 用了哪些技术(转)
原文:http://dbanotes.net/arch/quora_tech.html 很多团队都在学习.研究 Quora .前段时间看到这篇 Quora’s Technology Examined ...
- CSU1612Destroy Tunnels(强连通)
Destroy Tunnels 原来早忘记了离散里含有这么一个叫传递闭包的东西 矩阵A的闭包B = A U A^2 U A^3 U ... 所以这里直接如果A[i][j]!= 0,建边i->j跑 ...
- C# JabLib系列之如何保证只运行一个应用程序的实现
保证只运行一个应用程序的C#实现: using System;using System.Collections.Generic;using System.Linq;using System.Windo ...
- How Tomcat Works(六)
本文继续分析HttpProcessor类,该类实现了org.apache.catalina.Lifecycle接口和java.lang.Runnable接口 我们先分析它的构造函数 /** * The ...