html%3ca%3e标签隐藏,css - Disable a tag in HTML - Stack Overflow

To change cursor on inacticve tab use red svg with icon on li element by adding this to 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;

}

• Home
• INACTIVE

To generate svg from font go to http://fontello.com/ choose one icon and click on red upper button "Download webfont". Then unzip file and go to https://icomoon.io/app and click "Import icons" (button) and upload .svg file from that zip and select your icon and click (on page bottom) on "Generate svg and more". Then copy body of that svg file change/add proper size/ style (fill: red) inside it - and paste it to following script to get valid css url code:

let str = document.querySelector('.svgData').innerHTML;

let r = str

.replace('width="256" height="256" ', "")

.replace(/> +/g, ">")

.replace(/ +

.replace(/>/g, "%3E")

.replace(/

.replace(/>/g, "%3E")

.replace(/#/g, "%23")

.replace(/"/g, "'")

.replace(/ +/g, " ")

.replace(/^ +/g, "")

.split("\n")

.join("");

msg.innerHTML = `

cursor: url("data:image/svg+xml;utf8,${r}");

length: ${r.length} char`

block