单击链接后如何显示隐藏文本框？

时间：2016-01-20 15:42:46

标签： javascript html css dom

当我点击某个链接时，我想显示一个隐藏的文本框。

到目前为止，这是我的代码：

HTML：

data_t

的JavaScript 

<a onclick="show()">Add Deposit Threshold</a>
<div id="dThreshold" style="display:none">
    <table class="table">
        <tr>
            <td><b>Deposit Threshold</b></td>
            <td>
                <div class="row">
                    <div class="col-xs-12">
                        <input type="text" class="form-control" name="Threshold">
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>

我希望你们能帮助我。谢谢。

6 个答案:

答案 0 :(得分：2)

请改用以下代码（即首先访问style属性）：

function show() {
    //document.getElementById("dThreshold").display ="block";
    document.getElementById("dThreshold").style.display ="block";
}

以下是示例HTML页面的完整源代码：

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script type="text/javascript">
        function show() {
            //document.getElementById("dThreshold").display ="block";
            document.getElementById("dThreshold").style.display = "block";
        }
    </script>
</head>
<body>
    <a href="javascript:void(0);" onclick="show();">Add Deposit Threshold</a>
    <div id="dThreshold" style="display: none">
        ...
    </div>
</body>
</html>

答案 1 :(得分：1)

这是你的麻烦：

document.getElementById("dThreshold").style.display ="block";

正确的语法是包含样式。

您还需要一个可以点击的地方：

<form>
       <input type="button" onclick="show()" value="click here" />
       </form>

答案 2 :(得分：0)

修改：如果你不使用Jquery，其他关于访问风格的评论都是正确的。

以下是一个快速示例，您可以了解并修改以满足您的需求：

的javascript：

$('#show').click(function(){
    $('input').css('display', 'block');
})

HTML：

<a href="#" id="show">Click me!</a>
<input type="input" class="input"/>

的CSS：

input {
  display: none;
}

JSFiddle

答案 3 :(得分：0)

试试这个：

注意：在html之前包含脚本。否则show（）将是未定义的。

<script>
function show() {
   document.getElementById("dThreshold").style.display ="block";    
}
</script>

<a onclick="show()">Add Deposit Threshold</a>
 <div id="dThreshold" style="display:none">
  <table class="table">
 <tr>
  <td><b>Deposit Threshold</b></td>
  <td><div class="row"><div class="col-xs-12"><input type="text" class="form-control" name="Threshold"></div></div></td>
      </tr>
      </table>
       </div>

答案 4 :(得分：0)

我认为你应该改变

document.getElementById("dThreshold").display ="block";

到

document.getElementById("dThreshold").style.display ="block";

答案 5 :(得分：0)

虽然你已经有了很多答案，但我认为你应该将JavaScript移到HTML之外并使用不引人注目的JavaScript，这也可以使你的功能更普遍适用。我的第一个建议是使用DOM遍历来查找要显示的相应<div>元素：

// naming the function, the event argument
// is supplied automatically from the
// EventTarget.addEventListener() method:
function show(event) {

  // stopping the event bubbling (assuming you
  // want to, if not remove the line):
  event.stopPropagation();

  // finding the next element-sibling of the clicked
  // element, and setting the display property of the
  // element's style objects to 'block':
  this.nextElementSibling.style.display = 'block';
}

// creating an array from all the <a> elements with the class
// of 'toggle':    
var toggles = Array.from(document.querySelectorAll('a.toggle'));

// iterating over the Array of elements using
// Array.prototype.forEach():
toggles.forEach(function(toggle) {
  // 'toggle' the array-element of the array
  // over which we're iterating.

  // setting the function show() as the
  // event-handler for the 'click' event:
  toggle.addEventListener('click', show);
});

＆＃13;
＆＃13; 
function show(event) {
  event.stopPropagation();
  this.nextElementSibling.style.display = 'block';
}

var toggles = Array.from(document.querySelectorAll('a.toggle'));

toggles.forEach(function(toggle) {
  toggle.addEventListener('click', show);
});
＆＃13; 
a.toggle {
  display: block;
}
＆＃13; 
<a href="#" class="toggle">Add Deposit Threshold</a>
<div style="display:none">
  <table class="table">
    <tr>
      <td><b>Deposit threshold</b>
      </td>
      <td>
        <div class="row">
          <div class="col-xs-12">
            <input type="text" class="form-control" name="threshold">
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>
<a href="#" class="toggle">Add other details</a>
<div style="display:none">
  <table class="table">
    <tr>
      <td><b>Other details</b>
      </td>
      <td>
        <div class="row">
          <div class="col-xs-12">
            <input type="text" class="form-control" name="other">
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>
＆＃13;
＆＃13;
＆＃13;

JS Fiddle demo

但是，添加切换功能似乎更有意义，而不仅仅是“显示”功能。功能：

function show(event) {
  event.stopPropagation();

  // caching references to those elements/checks we
  // use more than once, to avoid unnecessary DOM
  // look-ups:

  // 'self' is the clicked link:
  var self = this,

  // 'target' is the next element-sibling (the <div>
  // containing the <table>):
    target = this.nextElementSibling,

  // 'check' is the result of assessing if the
  // current display of the 'target' element is
  // 'block'; if it is the variable is true, if
  // not then variable is false:
    check = target.style.display === 'block';

  // updating the display, if it is currently set
  // to 'block' we set it to 'none', if it's
  // currently not set to 'block' (so hidden) we
  // set it to 'block' (to show):
  target.style.display = check ? 'none' : 'block';

  // here we add a new class to the clicked element,
  // in order that we can use CSS generated-content
  // to appropriately toggle the link text between
  // 'Open' and 'Close' to reflect the action the link
  // will perform:
  self.classList.toggle('open', !check);
}

var toggles = Array.from(document.querySelectorAll('a.toggle'));

toggles.forEach(function(toggle) {
  toggle.addEventListener('click', show);
});

以上JavaScript与以下CSS结合使用：

a.toggle {
/* to force the <a> elements of class 'toggle'
   to occupy new lines (to minimise the visual
   disturbance of a <div> and its descendant
   <table> suddenly appearing): */
  display: block;
}

a.toggle::before {
/* Setting the 'default' text of the
   relevant <a> elements to be prepended
   with the 'text of 'Open': */
  content: 'Open ';
}

a.toggle.open::before {
  /* Prepending the link, when the <div>
     is shown, with the text 'Close ': */
  content: 'Close ';
}

＆＃13;
＆＃13; 
// comments to avoid having the JS
// hidden under the panel label 
function show(event) {
  event.stopPropagation();
  var self = this,
    target = this.nextElementSibling,
    check = target.style.display === 'block';
  target.style.display = check ? 'none' : 'block';
  self.classList.toggle('open', !check);
}

var toggles = Array.from(document.querySelectorAll('a.toggle'));

toggles.forEach(function(toggle) {
  toggle.addEventListener('click', show);
});
＆＃13; 
a.toggle {
  display: block;
}
a.toggle::before {
  content: 'Open ';
}
a.toggle.open::before {
  content: 'Close ';
}
＆＃13; 
<a href="#" class="toggle">Deposit Threshold</a>
<div style="display:none">
  <table class="table">
    <tr>
      <td><b>Deposit threshold</b>
      </td>
      <td>
        <div class="row">
          <div class="col-xs-12">
            <input type="text" class="form-control" name="threshold">
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>
<a href="#" class="toggle">other details</a>
<div style="display:none">
  <table class="table">
    <tr>
      <td><b>Other details</b>
      </td>
      <td>
        <div class="row">
          <div class="col-xs-12">
            <input type="text" class="form-control" name="other">
          </div>
        </div>
      </td>
    </tr>
  </table>
</div>
＆＃13;
＆＃13;
＆＃13;

JS Fiddle demo

相关问题
最新问题