尝试在选定选项卡的li之后插入跨度
要在选定的选项卡的<li>元素之后插入一个<span>元素，你可以使用JavaScript来实现。以下是一个示例代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Insert Span After Li</title>
</head>
<body>
<ul id="tabs">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<button onclick="insertSpanAfterLi(1)">Insert Span After Tab 2</button>
<script>
function insertSpanAfterLi(index) {
// 获取选定的<li>元素
const li = document.querySelector(`#tabs li:nth-child(${index + 1})`);
if (li) {
// 创建一个新的<span>元素
const span = document.createElement('span');
span.textContent = 'New Span';
// 在<li>元素之后插入<span>元素
li.parentNode.insertBefore(span, li.nextSibling);
} else {
console.error(`No <li> element found at index ${index}`);
}
}
</script>
</body>
</html>解释
- HTML结构：
- 创建一个包含多个
<li>元素的<ul>元素。 - 添加一个按钮，用于触发插入操作。
- 创建一个包含多个
- JavaScript函数：
insertSpanAfterLi(index)函数接受一个索引参数，表示要插入<span>元素的<li>元素的位置。- 使用
document.querySelector选择指定的<li>元素。 - 创建一个新的
<span>元素，并设置其文本内容。 - 使用
parentNode.insertBefore方法在选定的<li>元素之后插入新的<span>元素。
应用场景
这个功能可以用于动态地向选项卡列表中添加额外的信息或标记，例如在用户点击某个选项卡后插入一个标记，表示该选项卡已被激活或选中。
参考链接
希望这个示例能帮助你理解如何在选定的<li>元素之后插入一个<span>元素。如果你有任何其他问题，请随时提问！
相关·内容
我正在尝试将元素添加到UL > LI之后，其中包含一个类 $("#div ul li.ui-state-active").insert('<span class="ui-icon ui-icon-info我想要将图标放在已选中并处于活动状态的选项卡旁边 我只用过active类，还需要用selected类吗
浏览 7提问于2020-11-11得票数 0
1回答
我使用jquery设置了一个简单的Tab。我使用以下函数创建一个额外的jQuery选项卡，并将其插入到我喜欢的位置购买可以在这里看到主题有助于清楚地显示作为附加跨度插入到选项卡文本周围的最新选项卡
<
浏览 0提问于2012-05-04得票数 2
3回答
<li>SubItem3</li></li> <ol> <li>SubItem2</li>
<li>SubItem3<
浏览 3提问于2015-04-20得票数 4
回答已采纳
1回答
选中的选项卡在选项卡文本上显示插入符号。我正在尝试获得所有选项卡上的默认箭头光标(无选择选项卡给我帮助)。不确定我需要设置哪些css来使选项卡的所有内容都显示默认的游标。我有下面的，但它不改变光标的无选定和选定的选项卡。
..ui标签ul.ui-选项卡-nav li.ui-默认的</e
浏览 1提问于2015-03-04得票数 0
回答已采纳
下面是我的html： <li> </li> <a href="#">link 2</a> <a href="#">link 3<&
浏览 0提问于2013-02-19得票数 0
回答已采纳
1回答
在后面单击一次
、、
我有以下代码，它应该从选定的jQuery选项卡中的跨度中获取文本，但它似乎总是落后一键。也就是说，如果我单击tab1，它不会显示任何内容；如果我单击tab2，它会显示tab1中跨区中的文本。tab3将显示tab2的跨度，依此类推。不确定我做错了什么，但这是我目前拥有的代码：$('[id^="tab"]').live('click', function() {
aler
浏览 1提问于2012-06-27得票数 0
回答已采纳
2回答
我想从html中的一些列表项中去掉不需要的内容。基本上，我希望剥离给定跨度之前的所有内容(使用class选项卡)，但前提是此跨度之前的内容符合某些条件。</a></li>
<li>**<span class="tab"><!--tab--></span>Some other blabla, this one w
浏览 1提问于2013-03-15得票数 1
回答已采纳
嘿，我现在的代码如下var activeTabId = <%=ActiveTabId %>; <li><a href="#tab2">By Supp
浏览 2提问于2011-08-15得票数 2
回答已采纳
我正在尝试为TinyMCE创建一个插件，以便用户可以添加选定区域的浮动提示。我所需要的就是将选定的内容放入span，我是这样做的： '<span id="tooltip_widget_' + id + '">'
+ selectedtext但在Chrome和IE中，以下所有文本都会加入到添加的跨度中。唯一能继续输入<
浏览 6提问于2012-12-04得票数 2
回答已采纳
我应该如何在鼠标悬停时更改跨度的颜色？我目前有一个标签(就像菜单中的标签)已经被分类为跨度，假设是背景色为#595959的.rtsOut。每个选项卡仍被归类为相同的跨度，.rtsOut，但被划分为4个不同的选项卡。当我将鼠标移到上方时，我希望将该选项卡更改为#000000，并在鼠标移出跨度时恢复到#595959。我已经在谷歌上搜索了几个小时，也测试了几个小时，还是
浏览 3提问于2016-09-20得票数 1
我有一个我不太确定的问题。这是我的场景。我有一系列带有链接的列表项。无论何时点击链接，它都会将一个“正在加载”的图像插入到跨度中并向下滑动。在一些操作完成后，“加载”镜像被移除，内容被放到适当的位置。问题不在于slideDown本身，而在于操作完成之后。下面是我的代码： <li><a href="#">Item 1<&#
浏览 7提问于2009-07-29得票数 1
回答已采纳
2回答
当单击选项卡时，我试图在页上的选项卡旁边显示X，并且在显示和隐藏标签之间的X时遇到了问题。我正在从..。$('.tabs .tab-links a').on('click', function(e) {});
我的问题是，我有一个跨度，李和我似乎不能访问的跨度<
浏览 0提问于2015-10-07得票数 2
回答已采纳
1回答
我已经创建了两个选项卡，使用PHP选项卡，一个用于向数据库插入数据，另一个用于查看数据库中的数据，有人建议使用ajax，但我找不到我想要的答案。示例代码： <ul class="nav nav-tabs" role="tablist">
<a class="nav-link active" data-toggle=
浏览 13提问于2020-12-30得票数 0
回答已采纳
1回答
如何选择DIV的当前类
、、、
我通过选择div的类来为其分配唯一I index++; var url = '#fragment-' + index;
$('li.ui-state-default});
但我想将这些ids分配给当前选项卡。因为最后
浏览 1提问于2012-05-18得票数 0
回答已采纳
:" + } var li= document.createElement('li');
我需要在变量dateString周围添加一个跨度标记，将它们添加到上面将返回"1234“作为页面上的文本。字符串的呈现方式如下：
浏览 28提问于2011-04-27得票数 39
回答已采纳
1回答
我试图制作一个图像地图，弹出不同的图片在地图上不同的地方。我想在第一张图片之后再做一个“弹出”，但是我已经尝试过对我的代码进行各种修改，但是它还没有生效。我试图在CSS中做的事情可能吗？我意识到问题的一部分是，表示我的“你好”框的“内部”跨度与随图而来的“跨度”没有区别。我不知道如何把这些区分开来。第二个点只有在它被盘旋时才会从蓝色变成黄色，所以
浏览 0提问于2013-11-13得票数 0
回答已采纳
1回答
我有一个导航药丸的例子，下面我有一个导航药丸和活动标签切换取决于选定的选项卡，这是很好的工作。但是，链接将浏览器发送到另一个页面。我想让活性药丸和它离开的时候一样。我已经设置了sessionScope.ssSelectedPill =选中的链接id，这样当我返回时，我就知道在我离开之前有效的药片。
我不知道怎么才能在回来的路上放上有效的药丸。<div class="col-md-10
浏览 3提问于2015-07-28得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
