我需要一个动态的内容在同一页上不同的按钮点击

I need a dynamic content in the same page on different button clicks

本文关键字：一页 按钮 一个 动态      更新时间：2023-09-26

click上的三个图像按钮应该显示不同的内容。

我用来激活div显示客户端点击的javascript是:

function showfirstdiv()
{
    document.getElementById("1").style.display = "block";    
}
function showseconddiv()
{
    document.getElementById("2").style.display = "block";  
}
function showthirddiv()
{
    document.getElementById("3").style.display = "block";          
}

和div分别是:

<div id="1" style="display:none">Internal Holiday Entry</div>
<div id="2" style="display:none">Weekend Holiday Entry</div>
<div id="3" style="display:none">National Holiday Entry</div>

第一个按钮是:

 <asp:ImageButton ID="ImageButton1" runat="server" OnClientClick="showfirstdiv()"/>

按钮正在引起回发。你只需要改变这一行:

<asp:ImageButton ID="ImageButton1" runat="server" OnClientClick="showfirstdiv(); return false;"/>

正如其他人所说，你只需要隐藏你不想显示的其他div。

下面是一个工作示例:https://jsfiddle.net/6g63vb79/

<asp:ImageButton ID="ImageButton1" runat="server" OnClientClick="showHolidayEntry(1)"/>
<asp:ImageButton ID="ImageButton2" runat="server" OnClientClick="showHolidayEntry(2)"/>
<asp:ImageButton ID="ImageButton3" runat="server" OnClientClick="showHolidayEntry(3)"/>
<div id="1" class="holiday-entry" style="display:none">Internal Holiday Entry</div>
<div id="2" class="holiday-entry" style="display:none">Weekend Holiday Entry</div>
<div id="3" class="holiday-entry" style="display:none">National Holiday Entry</div>
Javascript 

this.showHolidayEntry = function (id) {
    var entries = document.getElementsByClassName('holiday-entry');
    for(var i = 0, entry; entry = entries[i]; i++) {
        entry.style.display = entry.id == id ? '' : 'none';
    }
    return false;
}
相关文章：