Question

点击三个图像按钮应显示不同的内容。

我在客户端点击时用于激活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()"/>

Answer 1

正如其他人所说，你只需要隐藏你不想显示的其他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;
}

Answer 2

该按钮导致回发。你只需改变这一行：

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

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

2 个答案: