單擊鏈接后如何顯示隱藏的文本框？

Question

當我單擊某個鏈接時，我想顯示一個隱藏的文本框。

到目前為止，這是我的代碼：

HTML：

<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>

的JavaScript

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

我希望你們能幫助我。 謝謝。

Answer 1

請改用以下代碼（即，首先訪問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>

Answer 2

這是您的麻煩：

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

正確的語法應包括樣式。

您還需要單擊以下位置：

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

Answer 3

編輯：如果您不使用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

Answer 4

嘗試這個：

注意：在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>

Answer 5

我認為你應該改變

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

至

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

Answer 6

盡管您已經有了很多答案，但我認為您應該將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);
});

 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); });

 a.toggle { display: block; }

 <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>

JS小提琴演示。

但是，添加切換功能而不是簡單地添加“ show”功能似乎更有意義：

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 ';
}

 // 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); });

 a.toggle { display: block; } a.toggle::before { content: 'Open '; } a.toggle.open::before { content: 'Close '; }

 <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>

JS小提琴演示。

單擊鏈接后如何顯示隱藏的文本框？

問題描述

6 個解決方案

解決方案1
2 2016-01-20 15:49:03

解決方案2
1 2016-01-20 15:53:13

解決方案3
0 2016-01-20 15:49:57

解決方案4
0 2016-01-20 15:51:18

解決方案5
0 2016-01-20 15:55:05

解決方案6
0 2016-01-20 16:39:03

單擊鏈接后如何顯示隱藏的文本框？

問題描述

6 個解決方案

解決方案1 2 2016-01-20 15:49:03

解決方案2 1 2016-01-20 15:53:13

解決方案3 0 2016-01-20 15:49:57

解決方案4 0 2016-01-20 15:51:18

解決方案5 0 2016-01-20 15:55:05

解決方案6 0 2016-01-20 16:39:03

解決方案1
2 2016-01-20 15:49:03

解決方案2
1 2016-01-20 15:53:13

解決方案3
0 2016-01-20 15:49:57

解決方案4
0 2016-01-20 15:51:18

解決方案5
0 2016-01-20 15:55:05

解決方案6
0 2016-01-20 16:39:03