21

我正在使用一个网站，其中所有内容都使用 jquery 通过 ajax 回发呈现。我正在使用 Ben Alman 的 hashchange ( http://benalman.com/projects/jquery-hashchange-plugin/ ) 来管理允许我为页面添加书签、使用后退按钮等的哈希历史...当然是 IE 9。在 IE 中，“已访问”链接没有被标记为已访问存在一个小问题。您可以看到在加载新内容之前单击链接后，链接会变成紫色（已访问）一瞬间。但是，一旦您单击后退按钮，链接就会出现，就好像它从未被访问过一样。这是我正在谈论的一个 jfiddle 示例：http: //jsfiddle.net/7nj3x/3/

这是 jsfiddle 代码，假设您有 jquery 和 head 中引用的 hashchange 插件：

$(function(){
  // Bind an event to window.onhashchange that, when the hash changes, gets the
  // hash and adds the class "selected" to any matching nav link.
  $(window).hashchange( function(){
    alert("Hash changed to:"+location.hash);  
    var hash = location.hash;
    // Set the page title based on the hash.
    document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
    //simulate body being rendered by ajax callback 
      if(hash == ""){  
        $("body").html("<p id='nav'><a href='#test1'>test 1</a> <a href='#test2'>test 2</a> <a href='#test3'>test 3</a></p>");
      }
      else{
        $("body").html("Right click within this pane and select \"Back\".");  
      }
  })
  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).hashchange(); 
});
4

7 回答 7

2

您可以简单地使用 IE 条件注释来加载特定样式： 

<!--[if IE]>
  a:visited {
     padding-left: 8px;
     background: url(images/checkmark.gif) no-repeat scroll 0 0;
}
<![endif]-->
于 2017-09-13T11:12:35.107 回答
0

也许如果您在将其附加到文档之前创建适当的元素并构建一个 DOM 段。

不确定它会起作用，不能在这里测试它，但我尝试调整你的代码。

$(function(){
  // Bind an event to window.onhashchange that, when the hash changes, gets the
  // hash and adds the class "selected" to any matching nav link.
  $(window).hashchange( function(){
    alert("Hash changed to:"+location.hash);  
    var hash = location.hash;
    // Set the page title based on the hash.
    document.title = 'The hash is ' + ( hash.replace( /^#/, '' ) || 'blank' ) + '.';
    //simulate body being rendered by ajax callback 
      if(hash == ""){  
        $("body").html(
          $("<p>").id("nav")
            .append($("<a>")
              .attr("href","#test1")
              .text("teste 1"))
            .append($("<a>")
              .attr("href","#test2")
              .text("test 2"))
            .append($("<a>")
              .attr("href","#test3")
              .text("test 3"))
        );
      }
      else{
        $("body").text("Right click within this pane and select \"Back\".");  
      }
  })
  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).hashchange(); 
});
于 2015-04-06T04:16:05.973 回答
0

为什么不设置一个代码块仅供 IE 使用，它设置隐藏输入标签的值以反映点击行为。如果单击链接，您可以将输入标记的值设置为等于该链接 id，并允许您 js 更新元素类以反映更改。

HTML if IE
<input type="hidden" id="clicked_link" />


JQuery JS if IE
$(function() {
    $(a).click(function() {
        $(this).attr('id').addClass('visited_link_class');
    });
});

CSS
.visited_link_class { color:#your color;}
于 2013-10-02T18:51:05.357 回答
0

一种选择是使用 HTML5 历史 API 来伪造浏览器历史。这样，只有在删除浏览器历史记录后，链接才会“未访问”。

就像在这个有用的页面上说的：

[...] 上面的方法用“/hello”切换地址栏中的 URL，尽管没有请求资产并且窗口保持在同一页面上。然而这里有一个问题。点击返回按钮后，我们会发现我们并没有返回到本文的 URL，而是返回到之前的任何页面。这是因为 replaceState 不操纵浏览器的历史，它只是替换地址栏中的当前 URL。

因此，就像该页面上提到的那样，您必须执行以下操作： 

history.pushState(null, null, hash);
于 2017-04-09T16:14:15.443 回答
0 
 You can simply use IE conditional comments to load a specific style:    
<!--[if IE]>
      a:visited {
         padding-left: 8px;
         background: url(images/checkmark.gif) no-repeat scroll 0 0;
    }
<![endif]-->
于 2017-09-12T06:50:40.760 回答
0

尝试考虑 css LVHA 角色，这意味着标签伪类的顺序很重要。

第一次定义这些类：

  • 一条链接
  • A：访问过
  • 答：悬停
  • 答：主动

如果这仍然不能解决您的问题，您可以使用另一个 js 路由器（hashchange）：https ://github.com/flatiron/director 我经常使用这个，它在许多情况下都能完美运行。

于 2017-04-03T22:47:19.167 回答
-1

这是 ie 中的一个安全功能。:visited 的功能在许多现代浏览器中受到限制，以防止 CSS 漏洞利用。因此，没有解决此问题的方法。

于 2014-03-31T09:45:30.950 回答