如何使用JavaScript或jQuery更改另一页面上元素的样式？

Question

好的，这是我的问题......我有两页。 在第一页上，我有一个标题（ h2 ）元素，我想在其上应用边框样式。 在第二页上，只有一个链接。 当点击第二页的链接时，要导航到第一页，它应该在h2标签周围的第一页上创建一个边框。

有关如何做到这一点的任何想法？ 是否可以使用常规JavaScript或jQuery来实现？

谢谢！

Answer 1

不 ，JavaScript是客户端的，为此您需要服务器记住链接是否被单击，可能是通过将其记录在数据库或会话变量中。

当然，如果你使用网站的传统模型，而不是加载已经使用纯JS的页面。

Answer 2

这将是这样做的一个非常愚蠢的办法，但它有可能这样做客户端。 我会认真地建议在服务器端做它。

在第2页上，使用哈希链接返回第1页：

<a href="/page1#border">Go back to page one and add a border</a>

在第1页，检查是否有哈希：

if (window.location.hash === '#border') {
    $('h2').addClass('withBorder');
}

Answer 3

我想如果你正在寻找这种情况，你可以通过将一些哈希传递给url来实现它：

我在second page url passed a hash named 'second' ，并将此脚本放在第二页上

$(function(){
    var url=window.location;
    var hash = url.hash.substr(1);
    if(hash == "second"){
       $('h2').css('border','solid 1px red');
    }
});

如果有帮助，请查看此项。

Answer 4

那么有一种方法可以用JavaScript做到这一点，虽然它很棘手，服务器端也很容易。 您需要使用一些JavaScript来加载不同的页面而不刷新整个DOM。 我用一种叫做pjax的东西来做这件事。 它的工作方式是让每个页面充当一个容器，通过ajax加载所有后续页面。 通过不执行完整页面重新加载，您在一个页面上进行的任何样式更改都会转移到其他页面（这种情况不会在实际的浏览器刷新后继续存在）。