说明：点击菜单按钮显示不同页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>常用导航栏</title>
<!--打开新窗口-->
<base target="_blank"/>
<!-- 导入JQuery库 -->
<script src="https://code.jquery.com/jquery-1.8.2.min.js"></script>
<style>
body {
background: #43e5d4;
}
.left-nav {
margin-top: 30px;
height: 600px;
background: #f0f3ef;
}
.left-nav .right {
width: 1200px;
height: 600px;
margin: 0 auto;
background-color: #eee;
position: relative;
}
.left-nav .right ul {
list-style: none;
width: 191px;
height: 600px;
background-color: #fff;
}
.left-nav .right ul li {
height: 26px;
text-align: center;
line-height: 26px;
color: #030a02;
font-size: 14px;
cursor: pointer;
}
.left-nav .right ul li span:hover {
color: red;
}
.left-nav .right ul li .div2 {
position: absolute;
left: 191px;
top: 0px;
display: none;
width: 1019px;
height: 600px;
/*text-align: center;*/
box-shadow: 1px 1px 2px #120865;
}
.tableHref {
width: 1019px;
}
td {
width: 204px;
height: 30px;
}
a {
font-size: 16px;
color: black;
}
a:hover{
color: blue;
}
a:link {
text-decoration: none;
}
strong {
display: block;
font-size: 1.5em;
margin-block-start: 0.83em;
margin-block-end: 0.83em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
text-align: left;
margin-left: 30px;
}
</style>
</head>
<body>
<div class="left-nav">
<div class="right">
<ul>
<li>
<span><h3>编程学习</h3></span>
<div class="div2" id="initDiv">
<table class="tableHref">
<tr><strong>常用工具地址</strong></tr>
<tr>
<td>
<a href="https://tool.lu/timestamp/">
时间戳转换
</a>
</td>
<td><a href="https://www.linuxcool.com/">
Linux命令大全
</a></td>
<td><a href="http://hemin.cn/jq/">
jQuery 速查表
</a></td>
<td><a href="https://tool.lu/hexconvert/">
进制转换
</a></td>
<td><a href="https://tool.lu/ip/">
IP地址查询
</a></td>
</tr>
<tr>
<td>
<a href="https://tool.lu/base64image/">
图片base64编码
</a>
</td>
<td><a href="https://tool.lu/coderunner/">
在线代码测试
</a></td>
<td><a href="https://text-compare.com/zh-hans/">
在线文本对比
</a></td>
<td><a href="https://tool.oschina.net/regex/">
正则表达式测试
</a>
</td>
<td><a href="https://tool.lu/urlconvert/">
下载链接转换工具
</a></td>
</tr>
<tr>
<td>
<a href="http://cal.apple886.com/">
网上计算器
</a>
</td>
<td>
<a href="https://tool.lu/curl/">
curl命令转代码
</a></td>
<td><a href="https://tool.lu/zhconvert">
中文简繁体转换
</a></td>
<td><a href="https://tool.gaodun.com/rmb.html">
数字大写转换器
</a>
</td>
<td><a href="https://cli.im/">
二维码制作工具
</a></td>
</tr>
<tr>
<td>
<a href="https://tool.lu/encdec/">
加密解密
</a>
</td>
<td>
<a href="https://tool.lu/crontab">
Cron表达式
</a></td>
<td><a href="https://pixlr.com/cn/x/">
在线PS
</a></td>
<td><a href="http://favorites.ren/">
在线收藏网址
</a>
</td>
<td><a href="https://cloudconvert.com/">
文件格式转换
</a></td>
</tr>
<tr>
<td>
<a href="https://www.eteste.com/">
字数统计
</a>
</td>
<td><a href="https://convertio.co/zh/">
文件格式转换
</a></td>
<td><a href="https://mp.weixin.qq.com/">
公众号
</a></td>
<td><a href="http://favorites.ren/"> </a></td>
<td><a href="https://cli.im/"></a></td>
</tr>
</table>
<table class="tableHref">
<tr><strong>常用链接地址</strong></tr>
<tr>
<td>
<a href="https://www.runoob.com/">菜鸟教程</a>
</td>
<td><a href="https://translate.google.cn/">
谷歌翻译
</a></td>
<td>
<a href="https://fanyi.baidu.com/?aldtype=16047#auto/zh">百度翻译</a>
</td>
<td><a href="https://blog.csdn.net/qq_36135928/article/details/90348725">IDEA最全配置</a></td>
<td><a href="https://blog.csdn.net/nuoyanli/article/details/86503686">VMware15安装centos7</a>
</td>
</tr>
<tr>
<td>
<a href="https://fanyi.baidu.com/?aldtype=16047#auto/zh">百度翻译</a>
</td>
<td><a href="https://www.cnblogs.com/hackyo/p/10677288.html">maven配置阿里仓库</a></td>
<td><a href="https://blog.csdn.net/qq_36135928/article/details/90348725">IDEA最全配置</a></td>
<td><a href="https://blog.csdn.net/nuoyanli/article/details/86503686">VMware15安装centos7</a>
</td>
<td><a href="http://www.ityouknow.com/">纯洁的微笑个人网站</a></td>
</tr>
</table>
<table class="tableHref">
<strong>常用配置参考</strong>
<tr>
<td>
<a href="https://archive.apache.org/dist/maven/maven-3/">maven下载</a>
</td>
<td><a href="https://www.cnblogs.com/hackyo/p/10677288.html">maven配置阿里仓库</a></td>
<td><a href="https://blog.csdn.net/qq_36135928/article/details/90348725">IDEA最全配置</a></td>
<td><a href="https://blog.csdn.net/nuoyanli/article/details/86503686">VMware15安装centos7</a>
</td>
<td><a href="https://blog.csdn.net/u013124587/article/details/50444220">装完Centos7提示Initial
setup of CentOS Linux 7</a></td>
</tr>
<tr>
<td>
<a href="https://blog.csdn.net/qq_36769100/article/details/71473632">linux不显示IP或者只显示127.0.0.1</a>
</td>
<td><a href="https://www.cnblogs.com/hackyo/p/10677288.html">maven配置阿里仓库</a></td>
<td><a href="https://blog.csdn.net/qq_36135928/article/details/90348725">IDEA最全配置</a></td>
<td><a href="https://blog.csdn.net/nuoyanli/article/details/86503686">VMware15安装centos7</a>
</td>
<td><a href="https://blog.csdn.net/u013124587/article/details/50444220"></a></td>
</tr>
</table>
</div>
</li>
<li>
<span><h3>代码仓库</h3></span>
<div class="div2">
<table class="tableHref">
<strong>在线代码仓库</strong>
<tr>
<td>
<a href="https://gitee.com/">码云</a>
</td>
<td><a href="https://www.githubs.cn/">GitHub中文社区</a></td>
<td><a href="https://mvnrepository.com/">MAVEN仓库中心</a></td>
<td><a href="">文字描述</a></td>
<td><a href="">文字描述</a></td>
</tr>
</table>
</div>
</li>
<li>
<span><h3>博客地址</h3></span>
<div class="div2">
<table class="tableHref">
<strong>LINUX克隆</strong>
<tr>
<td>
<a href="https://www.cnblogs.com/maobuji/p/7307298.html">centos7-vmware克隆后的配置</a>
</td>
<td><a href="https://blog.csdn.net/the_victory/article/details/79604586"></a>centos7
克隆后的虚拟机网络配置( restart network失败的解决方法)
</td>
<td><a href="https://blog.csdn.net/qq_36135928/article/details/90348725">IDEA最全配置</a></td>
<td><a href="https://blog.csdn.net/nuoyanli/article/details/86503686">VMware15安装centos7</a>
</td>
<td><a href="https://blog.csdn.net/u013124587/article/details/50444220">装完Centos7提示Initial
setup of CentOS Linux 7</a></td>
</tr>
</table>
</div>
</li>
<li>
<span><h3>娱乐天地</h3></span>
<div class="div2">
<table class="tableHref">
<td>
<a href="https://gitee.com/">码云</a>
</td>
<td><a href=""></a></td>
<td><a href=""></a></td>
<td><a href=""></a></td>
<td><a href=""></a></td>
</table>
</div>
</li>
</ul>
</div>
</div>
</body>
<script>
//鼠标点击区域时
$("#initDiv").css({'background': '#c7c7c7'}).show();//显示div
$('.left-nav .right ul li').click(function () {
$(this).css({'background': '#eee'});
$(this).find('div').css({'background': '#c7c7c7'}).show();//显示div
$('.div2').not($(this).find('div')).hide();
$('.left-nav .right ul li').not($(this)).css({'background': '#fff'});
});
</script>
</html>效果
381
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
