Question

我有不同的锚标签，href = #ids。我想要一个新的href值，而不是最后的锚。意思是，我不希望锚点出现在搜索栏上。但是，我会设置id的样式来进行播放。

目前，在我的CSS中，我有以下样式，在您选择时会突出显示特定部分的背景，比如西班牙语链接：

CSS：

CarId

我希望这仍然会影响该部分，但没有锚点出现在href。

#Espanol:target{
     background-color: #ffa;
    -webkit-transition: all 1s linear;
}

a[href='##Non-Discrimin'] {
  display: none
}

两个“##”的原因是我使用coldfusion和网站崩溃，如果我只使用1'＃'。是否有其他方法可以隐藏锚点不显示？目前显示如下：

/君威-EN-US /非歧视和语言援助/＃非Discrimin 的

我希望锚点不会显示在最后：

/君威-EN-US /非歧视和语言援助/ 的

Answer 1

你不能用纯CSS做这个，你需要一些JS。这是一个jQuery解决方案：

＆＃13;

$('a').each(function() {
  $(this).attr('href', $(this).attr('href').split('#')[0]);
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="langLI" style="list-style-type:none"><a href="/Regal-en-us/non-discrimination-and-language-assistance##Non-Discrimin">English</a></li>

＆＃13;

这将适用于所有a标记，更具体地说，您可以更改选择器。

Answer 2

为了从href属性值的末尾删除匹配的字符串，您需要使用JavaScript（或者如果您愿意，还需要使用后端服务器端脚本语言）：

// advance apologies for the clunky name
function removeFromAttributeByString(opts) {

  // initialising an object with the default names,
  // albeit all Object key-values are false at this
  // time (but sensible defaults could be used if
  // you prefer):
  let defaults = {
      'needle': false,
      'attribute': false,
      'haystackSelector': false
    },
    haystack;

  // iterating over the keys of the opts Object if supplied,
  // or an empty Object if opts is not supplied (this is simply
  // to prevent an error message in the absence of a supplied
  // Object) using Object.keys() and Array.prototype.forEach():
  Object.keys(opts || {}).forEach(

    // an Arrow function where we supply the current Object-key
    // ('key') to the function, and set the key-value for the
    // defaults Object to be equal to the key-value supplied
    // via the opts Object passed to the function:
    key => defaults[key] = opts[key]
  );

  // here we use the Object.values() method to retrieve an
  //  array of the defaults Object's values, and iterate over
  // that array using Array.prototype.every() with the Boolean
  // argument, testing that every value is Boolean true and,
  // if so, returning true:
  if (Object.values(defaults).every(Boolean)) {

    // here we find all elements that match the supplied CSS
    // selector (defaults.haystackSelector) and then use
    // Array.from() to convert that array-like nodeList into
    // an Array:
    haystack = Array.from(
                 document.querySelectorAll( defaults.haystackSelector )
               );

    // we filter that array, using Array.prototype.filter():
    haystack.filter(

      // using an Arrow function to pass the current element of
      // the array to the function, and if the current element
      // has the supplied attribute (defauls.attribute) it's
      // retained in the returned Array, otherwise it's discarded:
      element => element.hasAttribute(defaults.attribute)

    // using Array.prototype.forEach() to iterate over the array
    // of elements retained:
    ).forEach(

      // here we set the attribute-value to the same attribute-value
      // after we remove the supplied text ('defaults.needle') from
      // attribute-value:
      element => element[defaults.attribute] = element[defaults.attribute].replace(defaults.needle, '')
    );

  }

}

removeFromAttributeByString({
  'needle': '##Non-Discrimin',
  'attribute': 'href',
  'haystackSelector': 'a'
});

＆＃13;

function removeFromAttributeByString(opts) {
  let defaults = {
      'needle': false,
      'attribute': false,
      'haystackSelector': false
    },
    haystack;

  Object.keys(opts || {}).forEach(
    key => defaults[key] = opts[key]
  );

  if (Object.values(defaults).every(Boolean)) {

    haystack = Array.from(document.querySelectorAll(defaults.haystackSelector));
    haystack.filter(
      element => element.hasAttribute(defaults.attribute)
    ).forEach(
      element => element[defaults.attribute] = element[defaults.attribute].replace(defaults.needle, '')
    );

  }

}

removeFromAttributeByString({
  'needle': '##Non-Discrimin',
  'attribute': 'href',
  'haystackSelector': 'a'
});

＆＃13;

<ul>
  <li class="langLI" style="list-style-type:none"><a href="/Regal-en-us/non-discrimination-and-language-assistance##Non-Discrimin">English</a></li>
</ul>

＆＃13;

参考文献：

如何通过href的#id隐藏锚标记

2 个答案: