[英]Javascript - Using Anchor to show/hide table from external link?
I'm new to Javascript
and I'm working on a project. 我是Javascript
新手,正在从事一个项目。 Thanks to help from a online help website, I'm able to show/hide my table successfully. 感谢在线帮助网站的帮助,我能够成功显示/隐藏我的桌子。
When I click the h3 element, it opens up and append the anchor (in this situation, #1, #2, #3) to the URL. 当我单击h3元素时,它将打开并将锚点(在这种情况下为#1,#2,#3)附加到URL。
I want to use this anchor element to open up the specific table from an external link from another web page. 我想使用此锚元素从另一个网页的外部链接打开特定表。 (eg at Home Page, I clicked on this testing.html#1, I want it automatically open the 1st table when I reach the page) (例如,在主页上,我单击此testing.html#1,我希望它在到达该页面时自动打开第一个表)
Thank you very much! 非常感谢你!
JAVASCRIPT JAVASCRIPT
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function showonlyone(thechosenone) {
$('.newboxes').each(function(index) {
if ($(this).attr("id") == thechosenone) {
$(this).show(200);
}
else {
$(this).hide(600);
}
});
}
</script>
CSS 的CSS
<style>
#special1{ display: none }
h3 {text-align: center;
background-color: black;
color: white;
clear: both;
cursor: pointer; }
.newboxes {
display: none;
}
a {text-decoration: none;}
</style>
HTML 的HTML
<a id="myHeader1" onclick="javascript:showonlyone('newboxes1');" href="#1"><h3>Table 1</h3></a>
<table border="1" align="center" cellspacing="10px" class="newboxes" id="newboxes1">
<tr>
<td>1</td>
</tr>
</table>
<a id="myHeader2" onclick="javascript:showonlyone('newboxes2');" href="#2"><h3>Table 2</h3></a>
<table border="1" align="center" cellspacing="10px" class="newboxes" id="newboxes2">
<tr>
<td>2</td>
</tr>
</table>
<a id="myHeader3" onclick="javascript:showonlyone('newboxes3');" href="#3"><h3>Table 3</h3></a>
<table border="1" align="center" cellspacing="10px"class="newboxes" id="newboxes3">
<tr>
<td>3</td>
</tr>
</table>
Note this only work if you are loading from a html page in the same domain. 请注意,仅当您从同一域中的html页面加载时,此方法才有效。
JQuery's .load
function is very versatile. jQuery的.load
函数非常通用。 To load the first table from testing.html, we can do: 要从testing.html加载第一个表,我们可以执行以下操作:
$('#tableContainer').load('testing.html table:eq(0)');
2nd table: 第二表:
$('#tableContainer').load('testing.html table:eq(1)');
and so on. 等等。
demo Note that the 3 tables in the demo are loaded from here 演示请注意, 演示中的3个表是从此处加载的
If the URL ends with #1, and you need showonlyone('newboxes1') automatically executed: 如果URL以#1结尾,并且您需要自动执行showonlyone('newboxes1'):
if (window.location.hash.substr(1) == '1') {
showonlyone('newboxes1');
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.