首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >如何通过单击链接以编程方式显示和隐藏DIV?

如何通过单击链接以编程方式显示和隐藏DIV?
EN

Stack Overflow用户
提问于 2010-09-11 01:37:45
回答 3查看 4.8K关注 0票数 0

1)如何编程(不需要编写onclick="javascript:..“属性)将JavaScript (jQuery)函数附加到下面的链接?

2)单击语句链接后,切换隐藏/取消隐藏的最简单方法是什么?第一次单击应该显示DIV (取消隐藏),第二次单击应该隐藏它,以此类推。

代码语言:javascript
复制
<a>Statement</a>
<div id="taxStatement">insert select statement dropdownbox</div>
EN

回答 3

Stack Overflow用户

回答已采纳

发布于 2010-09-11 01:41:09

您可以为链接指定一个类,例如:

代码语言:javascript
复制
<a class="toggle" href="#">Statement</a>
<div id="taxStatement">insert select statement dropdownbox</div>

然后使用.click()document.ready上附加脚本,并对元素执行.toggle()操作,如下所示:

代码语言:javascript
复制
$(function() {
  $("a.toggle").click(function(e) {
    $(this).next().toggle();
    e.preventDefault();
  });
});

最初您可以通过多种方式隐藏<div>,CSS:

代码语言:javascript
复制
#taxStatement { display: none; }

或者给它一个类,例如class="toggleDiv",然后以相同的方式隐藏它们:

代码语言:javascript
复制
.toggleDiv { display: none; }

或者也可以通过脚本在您的document.ready中:

代码语言:javascript
复制
$(".toggleDiv").hide();

You can give it a try/experiment here

票数 3
EN

Stack Overflow用户

发布于 2010-09-11 01:42:45

对于问题1和2,您需要使用切换:

代码语言:javascript
复制
$('a').toggle(
function () {
  // Unhide Statement
  $('#taxStatement').show();
},
function () {
  $('#taxStatement').hide();
});
票数 1
EN

Stack Overflow用户

发布于 2010-09-11 01:41:18

代码语言:javascript
复制
   var theDiv = $('#taxStatement');

   theDiv.hide();
// make the div hidden by default.

   theDiv.prev('a').click(function(){ theDiv.toggle(); });
// ^^^^^^^^^^^^^^^^^^^^^^             ^^^^^^^^^^^^^^^^
// Attach the onclick                 hide & unhide.
//  assume the <a> is 
//  immediately before that <div>.
// It may be better to give an
//  id to that <a>.
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3686869

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档