当前位置：文江博客话题详情

保持元素存活？浏览网站时？

发布于 2024-11-30 19:12:23 字数 126 浏览 1 评论 0原文

我不知道如何问这个问题，但我希望有人能帮助我。例如，在浏览网站时是否可以将某个元素（即：页脚或某种元素）保留在查看器页面中？即使用户更改页面（或单击链接），页脚也不会消失吗？

我希望我的问题很清楚？

谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

九厘米的零° 2024-12-07 19:12:23

实现此目的的方法是，当有人单击您网站上的链接时，通过 AJAX/jQuery 加载所有内容。

您正在寻找的东西如下：

    <HTML>
    <HEAD>
    <SCRIPT src="jquery.js"></SCRIPT>

    <SCRIPT>
    function getPage(page) 
    { 
    $("#mainContent").load(page); 
    } 
    </SCRIPT>
    </HEAD>
    <BODY>
    <DIV>
    <a href="Javascript:getPage('aboutus.html')">About Us</a>
    <a href="Javascript:getPage('contactus.html')">Contact Us</a>
    </DIV>

    <DIV id="mainContent">
    Here is the default/home page information
    </DIV>
    </BODY>
    </HTML>

链接页面只需要其中包含核心信息，并且将自动给出来自登陆页面的任何CSS信息。但是，页面上的菜单和 mainContent div 标记之外的任何内容都是静态的。

The way this can be achieved is by making all content loaded through AJAX/jQuery when someone clicks a link around your website.

Something you are looking for is as follows:

    <HTML>
    <HEAD>
    <SCRIPT src="jquery.js"></SCRIPT>

    <SCRIPT>
    function getPage(page) 
    { 
    $("#mainContent").load(page); 
    } 
    </SCRIPT>
    </HEAD>
    <BODY>
    <DIV>
    <a href="Javascript:getPage('aboutus.html')">About Us</a>
    <a href="Javascript:getPage('contactus.html')">Contact Us</a>
    </DIV>

    <DIV id="mainContent">
    Here is the default/home page information
    </DIV>
    </BODY>
    </HTML>

The linking pages only need to have the core information in them, and will be automatically given any css information from the landing page. However you will have the menu and anything outside the mainContent div tag static on the page.

回复收藏 0 原文

强者自强 2024-12-07 19:12:23

您可以使用 iframe 来显示您的网站，并将页脚保留在实际文件中。不过这也有它的缺点，所以我不推荐它。

您还可以使用 AJAX 来加载页面，这是一种更合乎逻辑的方法。

回复收藏 0 原文

桃扇骨 2024-12-07 19:12:23

正如乔提到的，框架是一种选择，但现在人们不赞成使用框架。

另一种选择是使用 AJAX。这比框架更复杂，但会带来更好的体验。基本上，您要做的就是加载初始页面，这也会加载一些 JavaScript。 JavaScript 将附加到任何链接。当点击链接时，JavaScript 会将新页面加载到当前页面中，而不是像普通链接那样转到新页面并刷新整个页面。将加载的另一个页面将只是部分 HTML 页面，即不包括 html、head、body 标签和菜单等。相反，它只会包含内容。

下面是使用 jQuery 执行此操作的一些基本 JavaScript：

// attach a click handler to any nav links
$('nav a').click(function(event) {
    event.preventDefault();

    $('#content').load($(this).attr('href'));
});

另一种选择是加载隐藏 div 中其他页面的所有内容。如果您有很多内容，这可能会导致非常大的初始负载。在这种情况下，您的 HTML 中将包含类似以下内容：

<style>
     .content { display:none; }
</style>
<nav>
    <a href="home">home</a>
    <a href="contact">contact</a>
</nav>
<div class="content content_home" style="display:inherit;">...</div>
<div class="content content_contact">...</div>

// attach a click handler to any nav links
$('nav a').click(function(event) {
    event.preventDefault();

    $('.content').hide().filter('.content_' + $(this).attr('href'));
});

希望这会有所帮助。

As Joe mentioned, frames are an option, but they're frowned upon these days.

Another option is to use AJAX. This is a more complicated than frames, but results in a much better experience. Basically, what you'd do is have the initial page load, which would also load some JavaScript. The JavaScript would be attached to any link. When the link is clicked, instead of, like a normal link, going to a new page and the whole page refreshing, JavaScript would load the new page into the current page. The other page that would be loaded would only be a partial HTML page, ie, not including the html, head, body tags and the menu etc. Instead it would just have the content.

Here's some basic JavaScript using jQuery to do this:

// attach a click handler to any nav links
$('nav a').click(function(event) {
    event.preventDefault();

    $('#content').load($(this).attr('href'));
});

Another option is to load all the content for the other pages in hidden divs. If you have a lot of content, this can result in a very large initial load. In this case you'd have something like this in your HTML:

<style>
     .content { display:none; }
</style>
<nav>
    <a href="home">home</a>
    <a href="contact">contact</a>
</nav>
<div class="content content_home" style="display:inherit;">...</div>
<div class="content content_contact">...</div>

// attach a click handler to any nav links
$('nav a').click(function(event) {
    event.preventDefault();

    $('.content').hide().filter('.content_' + $(this).attr('href'));
});

Hopefully this helps.

回复收藏 0 原文