我可以使用document.getElementById(href)显示页面的特定部分吗?

编程入门 行业动态 更新时间:2024-10-06 08:32:17
本文介绍了我可以使用document.getElementById(href)显示页面的特定部分吗?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧! 问题描述

如果我有一个名为内容页面的页面:

if I have a page called "content page":

<body > <p id="part1">Tread ... inch. </p> <p id="part2">Tread ... inch. </p> <p id="part3">Tread ... inch.</p> </body>

和另一个带有此java脚本的页面(关闭图标不会出现)。

and another page with this java script(code in close icon doesn't appear ).

<head> <script type="text/javascript" src="popupBox.js"></script> </head> <body> show content of part one : <a href="TreadDepth.html" onClick="return show_hide_box(this,400,400,'2px solid')">Click Here</a>. show content of part two : <a href="TreadDepth.html" onClick="return show_hide_box(this,400,400,'2px solid')">Click Here</a>. show content of part three : <a href="TreadDepth.html" onClick="return show_hide_box(this,400,400,'2px solid')">Click Here</a>. </body>

如果我想要检索要在弹出框中显示的内容页面的特定部分,是可能吗?

if I want to retrive a specific part of a content page to be shown in the popup box, is that possible?

我的意思是在popup.js的这一部分:

I mean in this part at popup.js:

var boxdiv = document.getElementById(href);

我可以在页面的href中指定标签的ID来进行检索吗?喜欢:

can I specify an ID of a tag in the href of the page to retrive it? like :

var href = an.href; var boxdiv = document.getElementById(href).getElementById("Show The content of this ID tag!");

任何想法?

推荐答案

您所要求的内容让我想起 WML 如何运作,单页上有多张卡片,一次只显示其中一张卡片。可以将一个页面的内容加载到另一个页面中,但不是您想象的方式。

What you're asking for reminds me of how WML works, with multiple cards on a single page, only one of which is shown at once. It's possible to load the content of one page in another, but not the way you envision.

正如您可能从名称中猜到的那样, getElementById 根据ID属性获取一个元素,没有别的。相反,您必须加载其他页面的内容,此时您可以按需显示其中的部分内容。

As you might guess from the name, getElementById gets an element based on the ID attribute, nothing else. Instead, you have to load the content of the other page, at which point you can show parts of it on demand.

在popupBox.js中:

In popupBox.js:

var show_hide_box; # it may not be best to set width, height and border this early, # but it simplifies the code below (function(width, height, border) { var pages = {}; function show_hide_box(link) { var path = (/^[^#]*/.exec(link.href))[0]; if (pages[path]) { show_content(pages[path], link); } else { fetch_content(link, path); } return false; } function show_content(path, link) { var id = (/#(.*)/.exec(link.href))[1]; if (content[id]) { # Show content[id], which is a DOM node ... } else { # the page exists, but not the fragment. Could search # content.elements for the ... } } function fetch_content(link, path) { $.ajax({ url: link.href, success: function(data, textStatus, jqXHR) { pages[path] = {elements: $(data).filter('p')}; pages[path].elements.each(function (idx, elt){ # TODO: handle elements w/ no id pages[path][elt.id] = elt; }); show_hide_box(link); }, error: function(jqXHR, textStatus, errorThrown) { # Can't load the content, so just load the page. window.location.href = link.href; } ); } window.show_hide_box = show_hide_box; })(400,400,'2px solid'); $(function() { $('.external_content').click(function(evt) { show_hide_box(this); evt.preventDefault(); }); });

在另一页:

<body> show content of <a href="TreadDepth.html#part1" class="external_content">part one</a>. show content of <a href="TreadDepth.html#part2" class="external_content">part two</a>. show content of <a href="TreadDepth.html#part3" class="external_content">part three</a>. </body>

在脚本中订阅事件监听器通常被认为是更好的形式,而不是 HTML inline 。此外,请勿使用点击此处获取链接文字。

It's generally considered better form to subscribe event listeners in a script, rather than inline in HTML. Also, don't use "click here" for link text.

更多推荐

我可以使用document.getElementById(href)显示页面的特定部分吗?

本文发布于:2023-11-02 06:25:10,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/34/1551616.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:可以使用   页面   getElementById   document   href

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!