Question

我有一个固定的导航栏，其中包含 a-tag ，可链接到哈希网址。点击 a-tag 后，网址会从 url.com 更改为 url.com/#all ，页面会向下滚动到div使用归属ID，导航栏仍然会在修复后显示。

我想要的是在网址中出现 #all 时设置 a-tag 的样式。所有没有刷新页面。我想用jQuery可以很简单，但我不确定如何。

简化我想要的是：

网址中没有#all：

<div style="position:fixed;height:50px;width:100%;"> <a href="#all">All</a> </div>

在网址中使用#all：

<div style="position:fixed;height:50px;width:100%;"> <a href="#all" style="font-weight:700;">All</a> </div>

这也意味着当从URL再次删除#all时，也应该删除样式 - 再次，所有这些都不刷新页面。

Answer 1

所以基本上你想要在点击后更改链接的样式。这可以通过css轻松完成：

a:visited {
    font-weight: 700;
}

我建议给你的链接一个类或一个id，这样风格不适用于所有这些！

如果你真的想要我们jQuery，你可以做这样的事情：

$('a').click(function() {
    $('a').css("font-weight", "700");
})

如果您确实想使用该网址，请尝试：

if (window.location.href == 'http://url.com/#all')
    $('a').css("font-weight", "700");

我唯一关心的是http / https，但是应该使用OR条件或url变量上的一些正则表达式轻松处理，以获得更好的子字符串。

Answer 2

如果您使用的是bootstrap，请使用built-in bootstrap scrollspy。否则使用this fiddle code to create your own。根据需要修改代码

// Cache selectors
var lastId,
    topMenu = $("#top-menu"),
    topMenuHeight = topMenu.outerHeight()+15,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });

// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function(e){
  var href = $(this).attr("href"),
      offsetTop = href === "#" ? 0 : $(href).offset().top-topMenuHeight+1;
  $('html, body').stop().animate({ 
      scrollTop: offsetTop
  }, 300);
  e.preventDefault();
});

// Bind to scroll
$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop()+topMenuHeight;

   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";

   if (lastId !== id) {
       lastId = id;
       // Set/remove active class
       menuItems
         .parent().removeClass("active")
         .end().filter("[href='#"+id+"']").parent().addClass("active");
   }                   
});

Answer 3

您只需使用#

即可从网址获取JavaScript值

var id = window.location.hash.substr(1);

现在您拥有#之后的值，然后您可以将其用作selector。

所以，例如;

/**
 * Lets say the URL looks like this:
 * https://example.com#all
 * var id contains now the value `all`
 */
var id = window.location.hash.substr(1);
    /**
     * Update id to valid css id selector
     * id is now `#all`
     */
    id = "#" + id;
/**
 * Get the element using the id we created above
 */
var elem = document.querySelectorAll('a[href="'+ id +'"]')[0];
    /**
     * You can also change the font weight using JavaScript
     */
    elem.style.fontWeight = "700";

请参阅下面的演示;

＆＃13;

/**
 * Lets say the URL looks like this:
 * https://example.com#all
 * var id contains now the value `all`
 */
var id = "all" //(Lets asume the value is `all`)window.location.hash.substr(1);
  /**
   * Update id to valid css id selector
   * id is now `#all`
   */
  id = "#" + id;
/**
 * Get the element using the id we created above
 */
var elem = document.querySelectorAll('a[href="'+ id +'"]')[0];
	/**
 	 * You can also change the font weight using JavaScript
 	 */
	elem.style.fontWeight = "700";

＆＃13;

<a href="#all">TEST</a>

＆＃13;

当hash出现在URL中时，更改a-tag上的CSS

3 个答案: