javascript - 有什么方法可以在课前或课后添加链接吗?
问题描述
我想在这个菜单上添加一个额外的菜单项,之前/之后我在课后用 css 添加它,但是有没有办法在这个新添加的 after 菜单上添加带有 js 或 jquery 的链接?我不想用 html 添加这个主菜单。
ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
background: #d89b00;
margin: 10px;
padding: 0;
position:relative;
}
ul li {
display: inline-block;
margin: 0;
padding: 0;
}
ul li a {
display: block;
padding: 15px 20px;
line-height: 20px;
color: #fff;
font-family: Raleway, sans-serif;
line-height: 1;
font-size: 14px;
letter-spacing: 1px;
text-decoration: none;
}
ul li a:hover {
color: #dff2fa;
}
ul li a::after {
position: absolute;
top: 100%;
left: 0;
z-index: -1;
box-sizing: border-box;
width: 100%;
height: 100%;
padding: 16px 20px;
color: #dff2fa;
background: #19799f;
content: attr(data-title);
transition: background 0.3s;
transform: rotateX(-90deg);
transform-origin: 50% 0;
}
ul:before{
content:"Home";
right:0;
padding:10px;
color:#fff;
}
<ul id="main-menu">
<li><a href="https://www.google.com" target="_blank">Info</a></li>
<li><a href="https://www.google.com" target="_blank">About</a></li>
<li><a href="https://www.google.com" target="_blank">Contact</a></li>
</ul>
解决方案
您可以使用prepend()
如下方式来实现这一点。
$('#main-menu').prepend('<li><a href="https://www.google.com" target="_blank">Home</a></li>');
ul {
display: block;
list-style: none;
margin: 0;
padding: 0;
background: #d89b00;
margin: 10px;
padding: 0;
position:relative;
}
ul li {
display: inline-block;
margin: 0;
padding: 0;
}
ul li a {
display: block;
padding: 15px 20px;
line-height: 20px;
color: #fff;
font-family: Raleway, sans-serif;
line-height: 1;
font-size: 14px;
letter-spacing: 1px;
text-decoration: none;
}
ul li a:hover {
color: #dff2fa;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="main-menu">
<li><a href="https://www.google.com" target="_blank">Info</a></li>
<li><a href="https://www.google.com" target="_blank">About</a></li>
<li><a href="https://www.google.com" target="_blank">Contact</a></li>
</ul>
推荐阅读
- java - 终止线程的更复杂的方法(守护线程或 Thread.interrupt())
- node.js - 使用 NodeJs Express Web 框架在 Rest API 中使用 AWS Secrets Manager 进行密码轮换的最佳实践
- c++ - 如何将对象插入地图以使地图获得所有权?安置?
- react-native - 使用 axios 反应本机 - 使用自签名 https 端点调用 localhost 的网络错误
- json - 使用 Swift 解码器协议解码 JSON 时遇到问题
- python - 将所有 xarray 数据集值替换为常量
- reactjs - 如何将状态数据从自定义钩子传递到反应组件?
- flutter - 如何使用 dart/flutter 将数字格式化为数千、数百万和数十亿?
- javascript - 将基于 DATE 的数组对象排序为字符串
- networking - 是否可以按最新值订购 Zabbix 商品?