首页 手机软件 手机游戏 单机游戏 资讯文章 专题下载 游戏合集 文章合集 php下载 php教程 电脑软件
+ -
当前位置：首页 → 问答吧 → 跪求一代码..小弟新手.

跪求一代码..小弟新手.

时间：2009-09-30

来源：互联网



怎么用jquery 来实现?演示站点加载完毕后最下面的LINKTALK

请高手附带代码.谢谢!! 小弟从此以后在这里开始学习..

作者: xiaoyunet   发布时间: 2009-09-30

$('').toggle(function(){
  //show
},function(){
  //hide
})

作者: yorsal   发布时间: 2009-10-01

复制代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.         "http://www.w3.org/TR/html4/loose.dtd">
  3. <html>
  4. <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
  5. <head>
  6.     <meta http-equiv="Content-Type" content="text/html;charset=GBK"/>
  7.     <title></title>
  8.     <style type="text/css">
  9.         html, body {
  10.             margin: 0px;
  11.         }
  12.         #bar_left {
  13.             z-index: 9999;
  14.             top: 500px;
  15.             left: 300px;
  16.             position: absolute;
  17.             width: 80px;
  18.             height: 20px;
  19.             float: left;
  20.             border-width: 1px 1px 1px 1px;
  21.             border-style: solid;
  22.             border-top-color: #333333;
  23.             border-left-color: #333333;
  24.             border-bottom-color: #333333;
  25.             border-right-color: #333333;
  26.             background: white;
  27.             cursor: pointer;
  28.         }
  29.         #bar_right {
  30.             z-index: 0;
  31.             position: absolute;
  32.             top: 500px;
  33.             left: 380px;
  34.             width: 200px;
  35.             height: 20px;
  36.             float: left;
  37.             border-width: 1px 1px 1px 0px;
  38.             border-style: solid;
  39.             border-color: #333333;
  40.             background: white;
  41.         }
  42.         #show_block {
  43.             z-index: 10;
  44.             position: absolute;
  45.             top: 199px;
  46.             left: 300px;
  47.             width: 150px;
  48.             height: 300px;
  49.             border: red 1px solid;
  50.             display: none;
  51.         }
  52.         #show_block #block_title {
  53.             border-bottom: red 1px solid;
  54.             width: auto;
  55.             height: 20px;
  56.         }
  57.         a {
  58.             color: red;
  59.             cursor: pointer;
  60.         }
  61.     </style>
  62.     <script type="text/javascript">
  63.         var flag = false;
  64.         $(document).ready(function() {
  65.             $("#close").click(function() {
  66.                 $("#show_block").hide();
  67.                 flag = false;
  68.                 $("#bar_left").css("border-width", "1px 1px 1px 1px");
  69.                 $("#bar_left").css("border-color", "#333333");
  70.             });
  71.             $("#bar_left").click(function() {
  72.                 $("#show_block").toggle();
  73.                 if (flag) {
  74.                     flag = false;
  75.                     $("#bar_left").css("border-width", "1px 1px 1px 1px");
  76.                     $("#bar_left").css("border-color", "#333333");
  77.                 } else {
  78.                     flag = true;
  79.                     $("#bar_left").css("border-width", "1px 1px 1px 1px");
  80.                     $("#bar_left").css("border-top-color", "white");
  81.                     $("#bar_left").css("border-left-color", "red");
  82.                     $("#bar_left").css("border-bottom-color", "red");
  83.                     $("#bar_left").css("border-right-color", "red");
  84.                 }
  85.             });
  86.         });
  87.     </script>
  88. </head>
  89. <body>
  90. <div id="show_block">
  91.     <div id="block_title">我是标题         <a id="close" href="#">X</a></div>
  92.     <div id="block_content">我是内容</div>
  93. </div>
  94. <div id="bar_left" style=>
  95.     <center>点击这里</center>
  96. </div>
  97. <div id="bar_right">
  98.     <center>其他内容</center>
  99. </div>
  100. </body>
  101. </html>
[ 此帖被kooness在2009-10-04 16:45重新编辑 ]

作者: kooness   发布时间: 2009-10-04

别忘了引入jquery的JS库。
另外，你提供的那个网页上的那个 LinkTalk 当点击时候 上边框应该是变成了一个图片 图片的左边是边框 这样就保证边框不间断了。

作者: kooness   发布时间: 2009-10-04

相关阅读 更多

热门阅读

热门下载

更多
关于本站 免责申明 联系我们

Copyright 2006-2020 php爱好者(phpfans.net) All Rights Reserved.备案号：湘ICP备2023016114号-2

本站为非盈利性网站，不接受任何广告。本站所有资源均由网友上传，如有侵权，请发邮件至 [email protected] phpfans.net