滑动菜单切换显示不同的内容

最新推荐文章于 2021-10-20 11:30:17 发布

badan1935

最新推荐文章于 2021-10-20 11:30:17 发布

阅读量241

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xinnianyu/articles/10776179.html

版权

本js代码需要先引用jquery框架，所以需要使用它的朋友请先引入jquery文件代码，百度上搜索一下就能找到jquery文件的代码了。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滑动菜单切换显示不同的内容</title>
<style>
* {
    margin:0px;
    padding:0px;
}
body {
    font-family: "微软雅黑";
}
#taskBox {
    width:400px;
    height:300px;
    margin:5px;
}
#taskBox h1 {
    text-align:center;
    line-height:35px;
    font-size:18px;
}
.none {
    display:none
}
td {
    padding:0px 3px;
}
.tasknav li {
    display:block;
    float:left;
    padding:5px 12px;
    background:#EAF5FF;
    color:#000;
    font-size:15px;
    cursor:pointer;
}
.tasknav li.on {
    background:#99CCFF;
    font-weight:bold;
}
.clear {
    clear:both;
}
.tasklist {
    line-height:30px;
    padding:0px 6px;
    background:#F5F5F5;
    margin:1px auto;
}
.tasklist em {
    float:right;
    font-style:normal;
    width:60px;
}
.tasklist i {
    float:left;
    font-style:normal;
    width:40px;
}
.btn {
    background:#1A8DFF;
    border:1px solid #1A8DFF;
    border-radius: 5px;
    color:#FFF;
    padding:3px 6px;
}
</style>
</head>
<body>
<ul class="tasknav">
  <li id="zttask" class="on">专题任务</li>
  <li id="pptask">品牌任务</li>
  <li id="cktask">词库任务</li>
  <li id="tempptask">临时品牌</li>
</ul>
<div class="clear"></div>
<dl id="ulzttask" class="tasklist">
  <dt>链接区一</dt>
  <dd>http://www.meiwutui.com/dp/netease.html</dd>
  <dd>http://www.meiwutui.com/dp/stanleywj.html</dd>
  <dd>http://www.meiwutui.com/dp/newsmynsm.html</dd>
</dl>
<dl id="ulpptask" class="tasklist none">
  <dt>链接区二</dt>
  <dd>http://www.meiwutui.com/dp/raycop.html</dd>
  <dd>http://www.meiwutui.com/dp/baseus.html</dd>
  <dd>http://www.meiwutui.com/dp/lelo.html</dd>
</dl>
<dl id="ulcktask" class="tasklist none">
  <dt>链接区三</dt>
  <dd>http://www.meiwutui.com/dp/flyco.html</dd>
  <dd>http://www.meiwutui.com/dp/dongchengddgj.html</dd>
  <dd>http://www.meiwutui.com/dp/irobotdq.html</dd>
</dl>
<dl id="ultempptask" class="tasklist none">
  <dt>链接区四</dt>
  <dd>http://www.meiwutui.com/dp/rocksm.html</dd>
  <dd>http://www.meiwutui.com/dp/ecovacssz.html</dd>
  <dd>http://www.meiwutui.com/dp/youlite.html</dd>
</dl>
<div class="clear"></div>
</body>
</html>

转载于:https://www.cnblogs.com/xinnianyu/articles/10776179.html

badan1935

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
滑动菜单切换显示不同的内容

本js代码需要先引用jquery框架，所以需要使用它的朋友请先引入jquery文件代码，百度上搜索一下就能找到jquery文件的代码了。<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>滑动菜单切换显示不同的内容</t...
复制链接

扫一扫