Javascript可以显示隐藏的div

时间:2016-11-17 16:32:54

标签: javascript asp.net

需要实现的是通过单击预览按钮(asp按钮,调用其他功能),隐藏预览部分显示。但它不能通过以下代码工作......不确定我错过了什么。我在这里看了很多答案,但非常奇怪,它们都没有奏效。如果您能就此提供一些想法/解决方案,将不胜感激。

<。>在.aspx

    <style>
    #PreviewSection {display:none;}

</style>
脚本中的

,(编辑为指向btPreview,但仍无法正常工作......)

    <script type="text/javascript">

    var previewbt = document.getElementById('btPreview');
    previewbt.addEventListener('click',function(){
        PreviewSection.style.display = "block";
        })

</script>

html:

    <div class ="container" id="InputSection">
    <table class="table">
        <tbody>
            <tr>
                <td style="width:60%">
                    <p>The Question</p>
                    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please fill in Question." ControlToValidate="TBQuestion" CssClass="alert-danger"></asp:RequiredFieldValidator>
                    <asp:TextBox ID="TBQuestion" runat="server" CssClass="form-control" MaxLength="100000" TextMode="MultiLine" Rows="10"></asp:TextBox>
                </td>
            </tr>
        </tbody>
    </table>

    <asp:Button ID="btPreview" runat="server" Text="Preview" CssClass="btn" OnClick="btPreview_Click"/>

</div>

<hr />

<div class="container" id="PreviewSection">
    <h3> The preview of the content.</h3>
    <table class="table">
        <tbody>
            <tr>
                <td>

                    Question: <asp:Label ID="LbPrevQuestion" runat="server" Text="" Font-Bold="True" ForeColor="#0066CC"></asp:Label><br />

                </td>
            </tr>
        </tbody>
    </table>
    <asp:Button ID="BtSubmit" runat="server" Text="Submit" CssClass="btn" OnClick="BtSubmit_Click" />
</div>

</asp:Content>

2 个答案:

答案 0 :(得分:0)

显示:无误导。它不仅没有显示,它不是页面的一部分。所以你不能点击它。使用不透明度:

  View v = LayoutInflater.from(parent.getContext())
                         .inflate(R.layout.holder_layout, parent, false);
  final CustomViewHolder holder = new CustomViewHolder(v);
  holder.itemView.setOnClickListener(new View.OnClickListener() {
    @Override 
     public void onClick(View view) {
      int adapterPos = holder.getAdapterPosition();
      if (adapterPos != RecyclerView.NO_POSITION) {
        //now you can use adapterPos to get the item in your list
      }
    }
  });

这是正确的js:

#previewSection{
  opacity:0;
 }

答案 1 :(得分:0)

可能这就是你想要的:

已修改以在我的第一篇文章后添加您的修改。

&#13;
&#13;
var BtPreview = document.getElementById('BtPreview');
BtPreview.addEventListener('click', function() {
  PreviewSection.style.display = "block";
})

var BtSubmit = document.getElementById('BtSubmit');
BtSubmit.addEventListener('click', function() {
  PreviewSection.style.display = "none";
  InputSection.style.display = "none";
})

var btPreview_Click = function() {
  console.log('Do something else for Preview.');
};

var btSubmit_Click = function() {
  console.log('Do something else for Submit.');
};
&#13;
#PreviewSection {
   display: none;
 }
&#13;
<div class="container" id="InputSection">
  <table class="table">
    <tbody>
      <tr>
        <td style="width:60%">
          <p>The Question</p>
          <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please fill in Question." ControlToValidate="TBQuestion" CssClass="alert-danger"></asp:RequiredFieldValidator>
          <asp:TextBox ID="TBQuestion" runat="server" CssClass="form-control" MaxLength="100000" TextMode="MultiLine" Rows="10"></asp:TextBox>
        </td>
      </tr>
    </tbody>
  </table>

  <button ID="BtPreview" runat="server" Text="Preview" CssClass="btn" OnClick="btPreview_Click()">Button Preview</button>

</div>

<hr />

<div class="container" id="PreviewSection">
  <h3> The preview of the content.</h3>
  <table class="table">
    <tbody>
      <tr>
        <td>
          Question:
          <asp:Label ID="LbPrevQuestion" runat="server" Text="" Font-Bold="True" ForeColor="#0066CC"></asp:Label>
          <br />

        </td>
      </tr>
    </tbody>
  </table>
  <button ID="BtSubmit" runat="server" Text="Submit" CssClass="btn" OnClick="btSubmit_Click()">Button Submit</button>
</div>
&#13;
&#13;
&#13;

这将是ASP的解决方案:

<div class="container" id="InputSection">
  <table class="table">
    <tbody>
      <tr>
        <td style="width:60%">
          <p>The Question</p>
          <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ErrorMessage="Please fill in Question." ControlToValidate="TBQuestion" CssClass="alert-danger"></asp:RequiredFieldValidator>
          <asp:TextBox ID="TBQuestion" runat="server" CssClass="form-control" MaxLength="100000" TextMode="MultiLine" Rows="10"></asp:TextBox>
        </td>
      </tr>
    </tbody>
  </table>

  <asp:Button ID="BtPreview" runat="server" Text="Preview" CssClass="btn" OnClick="btPreview_Click()"/>
</div>

<hr />

<div class="container" id="PreviewSection">
  <h3> The preview of the content.</h3>
  <table class="table">
    <tbody>
      <tr>
        <td>
          Question:
          <asp:Label ID="LbPrevQuestion" runat="server" Text="" Font-Bold="True" ForeColor="#0066CC"></asp:Label>
          <br />

        </td>
      </tr>
    </tbody>
  </table>
  <asp:Button ID="BtSubmit" runat="server" Text="Submit" CssClass="btn" OnClick="btSubmit_Click()" />
</div>