兩個錨點和兩個表格，需要顯示和隱藏

我有兩個錨點和兩個表格，點擊錨點1時，我想要table1出現，點擊anchor2表格1必須關閉，表格2應該出現。兩個錨點和兩個表格，需要顯示和隱藏

我的JavaScript代碼的顯示和隱藏之間切換：

function setTable(what) { 
    if (document.getElementById(what).style.display == "block") { 
     document.getElementById(what).style.display = "none"; 
    } 
    else if (document.getElementById(what).style.display == "none") { 
     document.getElementById(what).style.display = "block"; 
    } 
}

我的兩個錨：

<td> 
    <a href="#" onclick="setTable('aboutdialog');return false" id="iam">I am</a> 
</td> 
<td> 
    <a href="#" onclick="setTable('stab');return false" id="photo">Photo</a> 
</td>

我的兩個表：

<table id="aboutdialog" title="Me mE me!!" style="display:none;" > 
<table width="100%" id="stab" style="display:none;width:58%;height: 60%;">

現在我的作品像，第一次單擊anchor1時顯示錶1，第二次單擊時隱藏table1。相同的anchor2。

但是我想單擊anchor1來關閉表2，如果打開並單獨顯示table1，反之亦然anchor2。

來源

2014-02-20 Beginner PHP

有相當多的人。我可以建議你回覆並且/或者提出你認爲有效的答案嗎？ – halfer

只需更換功能誰在這裏協助

function setTable(what){ 

    if(what=="aboutdialog"){ 
     document.getElementById("aboutdialog").style.display="block"; 
     document.getElementById("stab").style.display="none"; 
    } 
    else if(what=="stab"){ 
     document.getElementById("aboutdialog").style.display="none"; 
     document.getElementById("stab").style.display="block"; 
    } 
}

來源

2014-02-20 07:14:56

非常感謝你..它的工作..其實我被困在這個2天..非常感謝... –

你可以做這樣的事情：

$('#iam').click(function() { 
    $(this).closest('#aboutdialog').show().siblings('#stab').hide(); 
}); 

$('#photo').click(function() { 
    $(this).closest('#stab').show().siblings('#aboutdialog').hide(); 
});

來源

2014-02-20 07:08:58 Felix

沒有jQuery的

<td> 
     <a href="#" onclick="setTable('aboutdialog', 'stab');return false" id="iam">I am</a> 
    </td> 
    <td> 
     <a href="#" onclick="setTable('stab', 'aboutdialog');return false" id="photo">Photo</a> 
    </td>

然後

function setTable(what, second) { 
    if (document.getElementById(what).style.display == "block") { 
     document.getElementById(what).style.display = "none"; 
    } else if (document.getElementById(what).style.display == "none") { 
     document.getElementById(what).style.display = "block"; 
     document.getElementById(second).style.display = "none"; 
    } 
}

演示：Fiddle

一個jQuery的解決方案可能看起來像

<table> 
    <tr> 
     <td> 
      <!--Add a class trigger to the anchor elements--> 
      <a href="#aboutdialog" id="iam" class="trigger">I am</a> 
     </td> 
     <td> 
      <!--Add a class trigger to the anchor elements--> 
      <a href="#stab" id="photo" class="trigger">Photo</a> 
     </td> 
    </tr> 
</table> 
<!--Add a class target to the tables elements--> 
<table id="aboutdialog" title="Me mE me!!" style="display:none;" class="target"> 
    <tr> 
     <td>1</td> 
    </tr> 
</table> 
<!--Add a class target to the tables elements--> 
<table width="100%" id="stab" style="display:none;width:58%;height: 60%;" class="target"> 
    <tr> 
     <td>2</td> 
    </tr> 
</table>

然後

//dom ready handler 
jQuery(function() { 
    var $targets = $('.target'); 
    $('.trigger').click(function() { 
     var id = $(this).attr('href'); 
     //hide all other target elements 
     $targets.not(id).hide(); 
     //toggle the display of current element 
     $(id).toggle() 
    }) 
})

演示：Fiddle

來源

2014-02-20 07:10:18

嘗試使用jquery

$(document).ready(function($) { 
    $('#iam').click(function(){ 
     $('#aboutdialog').show(); 
     $('#stab').hide(); 
    }); 

    $('#photo').click(function(){ 
     $('#stab').show(); 
     $('#aboutdialog').hide(); 
    }); 
});

來源

2014-02-20 07:11:00

live example is here >>

簡單與jQuery庫：

$('#iam').click(function(){ 
    $('#aboutdialog').show().siblings('table').hide(); 
}); 
$('#photo').click(function(){ 
    $('#newdialog').show().siblings('table').hide(); 
});

HTML

<a href="#" onclick="setTable('aboutdialog');return false" id="iam">I am</a></td> 
<td><a href="#" onclick="setTable('stab');return false" id="photo">Photo</a></td> 

<table id="aboutdialog" title="Me mE me!!" style="display:none;" > 
<tr><th>abc</th></tr> 
</table> 

<table id="newdialog" title="Me mE me!!" style="display:none;" > 
<tr><th>yaskjd</th></tr> 
</table>

來源

2014-02-20 07:14:16

$(document).ready(function() { 
    var options = {'iam': 'aboutdialog', 'photo': 'stab'}; 
    $('#iam, #photo').on('click', function() { 
     $('#aboutdialog, #stab').hide(); 
     $('#' + options.($(this).attr('id'))).show(); 
    }); 
});

來源

2014-02-20 07:24:19

兩個錨點和兩個表格，需要顯示和隱藏

回答

相關問題