将类添加到不同页面上的元素

时间:2013-11-21 22:34:51

标签: javascript jquery html css

我有一个html页面foo.html和bar.html。

我希望foo.html上有一个按钮/链接,可以在bar.html上为div添加一个类。这是做什么的javascript或jQuery?

/foo.html

<a id="view1" onclick="addClass()" class="btn">View details »</a>

/bar.html

<div id="collapseThree" class="panel-collapse collapse"><div>

/foo.js

function addClass() {
    ???
}

修改

我可以使用任何东西,只要重定向到不同的页面设置div的类。

3 个答案:

答案 0 :(得分:1)

Javascript位于单个页面中,不会直接影响其他页面上的任何内容。

相反,请将第一页上的链接更改为:

<a href="view1#foo" class="btn">View details »</a>

然后在接收页面上使用js来解析URL,防止默认操作,如果URL中存在锚,则添加一个类。

像这样的东西(我不做js / jquery,所以其他人可以为你改进):

var wHash = window.location.hash.split('#')[1];
if (wHash) {
    $('#foo').addClass('whatever');
}

答案 1 :(得分:1)

是的,您可以使用cookies,localStorage或postMessage在页面之间进行通信,但无法直接访问其他页面的DOM。

试试这个:检查每个Xms是否localStorage已经改变(非常丑陋的解决方案,但没有服务器端脚本可以工作;)

foo.js(将其附加在两个文件中):

// apply to /foo.html
function addClass() {// toggleClass to be exact
  // set localStorage['collapse'] to 1 or 0 
  localStorage['collapse'] = localStorage['collapse'] ? 0 : 1;
}
// apply to /bar.html
(function() {
  var element = $('#collapseThree');
  if(element.length) {
    setInterval(function() {
      // when localStorage['collapse'] is 1, add class .collapse
      // other way: remove class collapse
      element.toggleClass('collapse', !!(localStorage['collapse'] || 0));
    }, 500);
  }
})();

你可以更聪明地用window.onfocus替换setInterval,这取决于你的需求

答案 2 :(得分:0)

您可以使用socket.io执行此操作,让客户端A发出一个在其他客户端上调用addClass方法的事件。