HTML篇之CSS样式：<button></button>按钮变成超链接<a></a>的样式

原文：http://blog.csdn.net/qq_16769857/article/details/52055349

[html] view plain copy

print?

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. <script type="text/javascript" src="jquery.min.js"></script>
  7. <style>
  8. .btn {
  9. color: blue;
  10. background-color: #FFFFFF;
  11. border: 0px none;  //去边框
  12. font-family: "宋体";
  13. font-size: 15px;
  14. text-decoration:underline;  //加下划线
  15. }
  16. .btn:hover{
  17. color:red;
  18. border: none;
  19. cursor: hand;
  20. cursor: pointer;
  21. text-decoration:underline;  //加下划线
  22. }
  23. .btn:focus {
  24. outline: none;    //去边框
  25. }
  26. </style>
  27. <script type="text/javascript">
  28. $(function(){
  29. $("input:button").click(function() {
  30. str = $(this).val()=="编辑"?"确定":"编辑";
  31. $(this).val(str);   // 按钮被点击后，在“编辑”和“确定”之间切换
  32. $(this).parent().siblings("td.‘.2-item‘").each(function() {  // 获取当前行的其他单元格
  33. obj_text = $(this).find("input:text");    // 判断单元格下是否有文本框
  34. if(!obj_text.length)   // 如果没有文本框，则添加文本框使之可以编辑
  35. $(this).html("<input type=‘text‘ value=‘"+$(this).text()+"‘>");
  36. else   // 如果已经存在文本框，则将其显示为文本框修改的值
  37. $(this).html(obj_text.val());
  38. });
  39. $(this).parent().siblings("td.‘.1-item‘").each(function() {  // 获取当前行的其他单元格
  40. obj_text = $(this).find("select");    // 判断单元格下是否有文本框
  41. if(!obj_text.length)   // 如果没有文本框，则添加文本框使之可以编辑
  42. $(this).html("<select><option value=‘volvo‘>Volvo</option><option value=‘volvo‘>Volvo</option></select>");
  43. else   // 如果已经存在文本框，则将其显示为文本框修改的值
  44. $(this).html(obj_text.val());
  45. });
  46. });
  47. });
  48. </script>
  49. </head>
  50. <body>
  51. <table>
  52. <tr>
  53. <td>2</td>
  54. <td class="1-item">1</td>
  55. <td class="2-item">2</td>
  56. <td class="2-item">2</td>
  57. <td><input class="btn"  type="button" value="编辑"></td>
  58. </tr>
  59. <tr><td>2</td><td>5</td><td><input type="button" name="btnSubmit" id="btnSubmit"  value="编辑"></td></tr>
  60. <tr><td>3</td><td>8</td><td><input type="button" value="编辑"></td></tr>
  61. <tr><td>4</td><td>2</td><td><input type="button" value="编辑"></td></tr>
  62. </table>
  63. </body>
  64. </html>

 

注：样式实现的功能：按钮变成超链接。其他代码是可编辑table，如果不可行可能是引用的

[html] view plain copy

print?

    1. <strong><span style="font-size:18px;">jquery.min.js版本问题</span></strong>
时间： 2024-10-24 01:27:30

HTML篇之CSS样式：<button></button>按钮变成超链接<a></a>的样式的相关文章

input[type=&#39;submit&#39;]input[type=&#39;button&#39;]button等按钮在低版本的IE下面，去掉黑色边框的问题

今天做一个tabs效果的时候,发现上面的button在低版本下会出现黑色的边框,很难看,于是我整理了下几个去掉黑色边框的办法: 1.在button的外层嵌套一个div,设置button的border:none; <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <st

第九篇、微信小程序-button组件

主要属性: 注:button-hover 默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;} 效果图: ml: <!--默认的button, 默认大小default,默认加载false,默认按键不为镂空,默认可以点击,点击有效果hover-class="other-button-hover"--> <button type="default" size="{{defaultSi

AxureRP7.0基础教程系列 部件详解 HTML Button HTML按钮

原型库网站-讲师金乌原创发布,可自由转载,请注明出处! Axure中文官网:www.AxureRP.cn   <AxureRP7.0部件详解> HTML Button HTML按钮 为操作系统的浏览器体验而设计 HTML按钮的格式取决于你浏览原型的操作系统中的浏览器.它通常针对你的浏览器内置了鼠标悬停和鼠标按下时的样式,这和你操作系统中应用程序的样式类似. 编辑HTML BUTTON 提交按钮的填充颜色.边框颜色和其他大多数样式格式都被禁用了.取而代之的是生成原型后在浏览器中它会使用内建的样式

input，button制作按钮IE6，IE7点击时1px黑边框的解决方法

按钮在IE6中点击时1px黑边框的最常见的解决方法 首先设置按钮为none,然后在按钮外面套一层来实现边框的效果,部分代码如下 .btnbox{ border:solid 1px red;} .btn{ border:none;} <span class="btnbox"><input class="btn" type="button" value="按钮"></span> 第二种办法通过滤

iOS 在tableView上添加button导致按钮没有点击效果和不能滑动的问题

[原]iOS 在tableView上添加button导致按钮没有点击效果和不能滑动的问题 2014-10-31阅读202 评论0 转载请注明出处. 今天在调试代码的时候,在tableviewcell上添加button,发现button快速点击的话,是看不出点击效果的,查找资料发现, ios7上UITableViewCell子层容器是UITableViewCellScrollView, ios6的则是UITableViewCellContentView.点击效果应该是被ScrollView的触摸延

【Android的从零单排开发日记】之入门篇（十四）——Button控件+自定义Button控件

    好久不见,又是一个新的学期开始了,为什么我感觉好惆怅啊!这一周也发生了不少事情,节假日放了三天的假(好久没有这么悠闲过了),实习公司那边被组长半强制性的要求去解决一个后台登陆的问题,结果就是把Android这块放在一边了,滚去看PHP的后台框架了(人家只是一个Android实习生,不带这么玩的),学校那边老师布置了一个hibernate的项目,还说我给你们一个月时间,慢慢看,慢慢学习(结果就是在群上发了一大堆的hibernate的视频教程,还真的是慢慢看慢慢学习了,而且视频还是极老的,h

web前端篇：CSS使用，样式表特征，选择器

目录 web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 2.CSS使用 3.样式表特征 4.CSS选择器 5.选择器的优先级 6.练习题: web前端篇:CSS使用,样式表特征,选择器 1.CSS介绍 CSS :Cascading Style Sheet 层叠样式表 作用 :修饰和美化页面元素,实现网页排版布局 2.CSS使用 1行内样式/内联样式 特点 :在具体的标签中使用style属性,引入CSS样式代码 语法: CSS 样式声明 / 语句: 对当前元素添加样式 语法:CSS 属

CSS制作三角形和按钮

CSS制作三角形和按钮 用上一篇博文中关于边框样式的知识点,能制作出三角形和按钮. 我先说如何制作三角形吧,相信大家在平时逛网站的时候都会看到一些导航栏中的三角形吧,比如说: 网易首页的头部菜单栏中,也会有这样的三角形 当鼠标经过时,三角形会垂直翻转,如下 现在我分享制作三角形的做法,主要是利用边框做成的 首先,四个三角形合并在一起的正方形,也就是正方形的四条边框形成的四个三角形 源代码: <!DOCTYPE html> <html lang="en"> <

CSS定义Radio单选项和Checkbox复选框样式有效代码

我们都知道一般情况利用css来定义Radio单选项和Checkbox复选框样式是无效的,下面我来给大家介绍利用CSS定义Radio单选项和Checkbox复选框样式,有需要了解的朋友可参考. 完全使用css来实例 复制代码 代码如下: <style type=”text/css”> form#form1 {font:12px tahoma,sans-serif} input[type="checkbox"] {visibility:hidden;width:0;height