温馨提示×

温馨提示×

您好，登录后才能下订单哦！

密码登录×
登录注册×
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
登 录 注册有礼
云服务器 香港服务器 高防服务器
最新更新 网站标签 地图导航
产品

自己写的一个简单但好用的滑动门jquery

发布时间：2020-06-16 13:10:07 来源：网络 阅读：442 作者：sunshiyi 栏目：web开发
先发html代码：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  var $div_li=$("div.menu ul li");
  $div_li.click(function(){
      $(this).addClass("selected")
             .siblings().removeClass("selected");
  var index=$div_li.index(this);
  $("div.info>div")
  .eq(index).show(500)
  .siblings().hide(500);
  }).hover(function(){
      $(this).addClass("hover");
      },function(){
      $(this).removeClass("hover");     
          });
});
</script>
<title>滑动门</title>
<link href="style/css.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="menu">
<ul>
<li>家具</li>
<li>龙头</li>
<li>浴室柜</li>
</ul>
</div>

<div class="info">
   <div>
   <ul>
   <li>又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后</li>
   <li>l，您将找到许多可以在线编辑并测试的 jQuery</li>
   <li>之后又一个优秀的Javascript框架，其宗旨</li>
   <li>列文章最后一篇，希望这些实用的插件</li>
   <li>js特效代码大全，JS广告代码，导航</li>
   <li>js特效代码大全，JS广告代码，导航</li>
   </ul>
   </div>
   <div class="hide">
      <ul>
   <li>主题547605个，贴子39022682篇，仙后12841缩后</li>
   <li>版街舞 达人秀惊现软骨哥独创软版街舞转贴到土</li>
   <li>淋漓尽致的一位选手，他独创的</li>
   <li>舞曲,最好听的dj音乐,免费dj舞曲下载,我们一直至力</li>
   <li>js特效代码大全，JS广告代码，导航</li>
   <li>《布鲁塞尔大广场》，选自《世界名街》长春人名导航</li>
   </ul>
   </div>
   <div class="hide">室柜</div>
</div>

<br>



<div class="menu">
<ul>
<li>家具</li>
<li>龙头</li>
<li>浴室柜</li>
</ul>
</div>

<div class="info">
   <div>家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具家具</div>
   <div class="hide">龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头龙头</div>
   <div class="hide">浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室浴室柜</div>
</div>
</body>
</html>
然后建立一个在style文件夹里建立css.css文件
body{ font-size:12px;}
.menu {width:400px; height:30px;border-bottom:#999 solid 1px;}
.menu ul{ padding:0; margin:0;}
.menu ul li{ display:block; height:29px; width:80px; float:left; line-height:28px; text-align:center; list-style:none;border:#999 solid 1px; border-bottom:none;}
.info{width:398px; border-left:#999 solid 1px; border-right:#999 solid 1px; height:280px;border-bottom:#999 solid 1px;}
.info ul{ padding:0 ; margin:0; list-style:none;}
.hide{ display:none;}
.selected,.hover{ background-color:#CCC;}
 样式不符合者可以自行修改css文件。
向AI问一下细节
推荐阅读：
  1. 写一个php memcache 简单的函数
  2. 用shell写一个简单的告警系统

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

jquery 滑动门 ue

猜你喜欢

最新资讯
相关推荐

相关标签

jquery插件 jquery特效 jquery-ui jqueryui ajax jquery jquery对象 jquery图片轮播 jqueryeasyui jquery datatable jquery.cookie.js jquery jsplumb jquery ui jquery分页 jquery弹出层 jquery弹出框 jquery入门 javascript/jquery jquery版本 jquery not jquery.min.js
AI
助
手
产品服务
地区划分
专题活动
帮助支持
关于我们
售后咨询
7*24小时在线电话：400-100-2938
7*24小时在线 QQ：800811969
关注亿速云

亿速云公众号

手机网站二维码

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有

广州亿速云计算有限公司粤ICP备17096448号-1 粤公网安备 44010402001142号增值电信业务经营许可证编号：B1-20181529