禁用HTML中的标签

Question

我的问题很简单。 我做了一个没有指针事件的.inactive类。

我实际上想显示来自glyphicon或红色的禁止符号。

我该如何实现？

 .inactive { color: #ccc; pointer-events: none; cursor: default; } .nav-tabs > li { background: #000; color: #fff; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation"><a href="#" class="inactive">INACTIVE</a></li> </ul> 

Answer 1

您可以将旋转90度的U+233D符号（⌽）添加为伪元素after的内容

.inactive::after {
  content: "\233D";
  display: inline-block;
  color: #D02124;
  margin-left: .5em;
  font-size: 1.5rem;
  transform: rotateZ(90deg);
}

Answer 2

要更改inacticve选项卡上的光标，请在li元素上使用带图标的红色svg，方法是将其添加到CSS中

li {
  cursor: url("data:image/svg+xml;utf8,   %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='31' height='32' viewBox='0 0 31 32'%3E%3Ctitle%3Eblock%3C/title%3E%3Cpath style='fill: red' d='M15.36 0.64q6.4 0 10.88 4.48t4.48 10.88q0 6.336-4.48 10.848t-10.88 4.512q-6.336 0-10.848-4.512t-4.512-10.848q0-6.4 4.512-10.88t10.848-4.48zM3.712 16q0 4.224 2.624 7.36l16.448-16.448q-3.2-2.624-7.424-2.624-4.864 0-8.256 3.424t-3.392 8.288zM15.36 27.648q4.864 0 8.288-3.424t3.424-8.224q0-4.16-2.624-7.424l-16.448 16.448q3.136 2.624 7.36 2.624z'%3E%3C/path%3E%3C/svg%3E "), auto;
}

 li { cursor: url("data:image/svg+xml;utf8, %3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='31' height='32' viewBox='0 0 31 32'%3E%3Ctitle%3Eblock%3C/title%3E%3Cpath style='fill: red' d='M15.36 0.64q6.4 0 10.88 4.48t4.48 10.88q0 6.336-4.48 10.848t-10.88 4.512q-6.336 0-10.848-4.512t-4.512-10.848q0-6.4 4.512-10.88t10.848-4.48zM3.712 16q0 4.224 2.624 7.36l16.448-16.448q-3.2-2.624-7.424-2.624-4.864 0-8.256 3.424t-3.392 8.288zM15.36 27.648q4.864 0 8.288-3.424t3.424-8.224q0-4.16-2.624-7.424l-16.448 16.448q3.136 2.624 7.36 2.624z'%3E%3C/path%3E%3C/svg%3E "), auto; } .inactive { color: #ccc; pointer-events: none; cursor: default; } .nav-tabs > li { background: #000; color: #fff; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> <ul class="nav nav-tabs"> <li role="presentation" class="active"><a href="#">Home</a></li> <li role="presentation" ><a href="#" class="inactive">INACTIVE</a></li> </ul> 

要从字体生成svg，请访问http://fontello.com/，选择一个图标，然后单击上方的红色按钮“下载webfont”。 然后解压缩文件并转到https://icomoon.io/app ，然后单击“导入图标”（按钮），然后从该zip文件中上传.svg文件，然后选择您的图标，然后单击（在页面底部）“生成svg及更多” 。 然后复制该svg文件的正文更改/在其中添加适当的大小/样式（ fill: red ）-并将其粘贴到以下脚本中，以获取有效的CSS网址代码：

 let str = document.querySelector('.svgData').innerHTML; let r = str .replace('width="256" height="256" ', "") .replace(/> +/g, ">") .replace(/ +</g, "<") .replace(/>/g, "%3E") .replace(/</g, "%3C") .replace(/>/g, "%3E") .replace(/#/g, "%23") .replace(/"/g, "'") .replace(/ +/g, " ") .replace(/^ +/g, "") .split("\\n") .join(""); msg.innerHTML = `<pre>cursor: url("data:image/svg+xml;utf8,${r}");</pre><br>length: ${r.length} char` 

 <div style="display:flex"> <!-- PASTE you svg file inside div below --> <div class="svgData"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="31" height="32" viewBox="0 0 31 32"> <title>block</title> <path style="fill: red" d="M15.36 0.64q6.4 0 10.88 4.48t4.48 10.88q0 6.336-4.48 10.848t-10.88 4.512q-6.336 0-10.848-4.512t-4.512-10.848q0-6.4 4.512-10.88t10.848-4.48zM3.712 16q0 4.224 2.624 7.36l16.448-16.448q-3.2-2.624-7.424-2.624-4.864 0-8.256 3.424t-3.392 8.288zM15.36 27.648q4.864 0 8.288-3.424t3.424-8.224q0-4.16-2.624-7.424l-16.448 16.448q3.136 2.624 7.36 2.624z"></path> </svg> </div> </div> <div id="msg"></div>