html-lists 相关问题

在给定 li 元素的 id 的情况下，是否可以使用 JavaScript 动态地从 ul 中删除几个 li 元素？关于实际问题的更新：我有以下清单。在给定 li 元素的 id 的情况下，是否可以使用 JavaScript 动态地从 ul 中删除几个 li 元素？有关实际问题的更新：我有以下清单。 <ul id="attributes" data-role="listview"> <li id="attrib01">Attribute1</li> <li id="attrib02">Attribute2</li> <li id="attrib03">Attribute3</li> <li id="attrib04">Attribute4</li> <li id="attrib05">Attribute5</li> </ul> 在 ajax 请求/响应之后，如果某个特定属性是“未定义”，我想将其从列表中删除。 if(typeof data.attrib1 === "undefined") $("#attrib01").remove(); 我已确保收到正确的 ajax 响应。所以，现在的问题是，当我删除 attrib4 时，attrib[1-3] 也会被删除。知道为什么会发生这种情况吗？尝试 var elem = document.getElementById('id'); elem.parentNode.removeChild(elem); 如果获得该元素，则找到其父元素，然后删除该元素。来自家长的信息如下： element = document.getElementById("element-id"); element.parentNode.removeChild(element); 必须经过家长，所以这是不可避免的。 $('#id').remove()是删除单个元素的正确方法。请注意，元素 ID 在 html 中必须是唯一的，并且该调用必须包装在 DOM 就绪函数中。这是一个基于您的 html 的工作示例。它循环遍历所有列表项并删除 id 不存在于数据对象中的项： var data = { attrib01: "Number 1", attrib02: "Number 2", attrib04: "Number 4" }; $(document).ready(function() { $("ul > li").each(function() { alert(this.id in data); //check if value is defined if(!(this.id in data)) { $(this).remove(); // This also works: //$('#'+this.id).remove(); } }); }); 也可以通过简单地执行以下操作来定位和删除单个元素（Demo）： $(document).ready(function() { $("#attrib04").remove(); }); 请小心您的 ID——它们必须完全匹配。 attrib04 != attrib4 这将使 li 元素不可见： document.getElementById("id_here").style.visibility = "hidden"; 免责声明：它们仍将位于 DOM 中要从 DOM 中删除元素，请使用 JQuery 的 .remove() 方法： $("#id_here").remove(); http://api.jquery.com/remove/

javascript jquery html html-lists

回答 4 投票 0

如何使用flutter_html插件在flutter中自定义UL>LI

我需要自定义 ul > li 上文本的第二行。我遇到的问题是项目符号点位于文本上方。如何解决这个问题，如下附件所示...

html list flutter widget html-lists

回答 2 投票 0

将下拉CSS导航栏向右对齐

我的网页上有一个导航栏，与页面的右侧对齐，徽标位于左侧。因此，当最右侧项目的下拉菜单出现时，它会偏离...

drop-down-menu html-lists navigationbar right-align

回答 1 投票 0

将照片和文字高度居中<ul>

我正在尝试将导航栏的内容居中对齐。图像看起来居中，但我怀疑这是由于它的大小，它拉伸了导航栏。我怎样才能在不改变

html css html-lists

回答 2 投票 0

在 XSLT 中制作 ul li 结构内标题节点的目录

总体概述我尝试通过仅选择标题节点（如 h1、h2…h9 (h[0-9])）来制作文档的目录 (TOC)。这些标题节点应采用级联结构 -... 总体概述我尝试通过仅选择标题节点（如 h1、h2…h9）来制作文档的目录 (TOC)。这些标题节点应采用级联 h[0-9]-<ul> 结构，其中依赖于 <li> 的所有 <hN+1> 都应是包含在 <hN> 的 <ul> 中的 <li>。示例为了更明确，让我们看这个例子。如果我有以下文件<hN>：document.xsl 那么预期的渲染应该是： <?xml version="1.0" encoding="UTF-8"?> <document> <h1>Lorem <i>arepo</i> ipsum dolor</h1> <h2>Lorem ipsum dolor</h2> <p> Sed ut <i>perspiciatis</i> unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </p> <h1>sit amet et consectetur</h1> <h2>Quia adipit</h2> <h3>aliquam quaerat</h3> <p> Sed ut <i>perspiciatis</i> unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </p> <h2>Erit et nunquam</h2> </document> 最小工作示例目前，我有这个<ul> <li> <span>Lorem <i>arepo</i> ispum dolor</span> <ul> <li><span>Lorem ipsum dolor</span></li> </ul> <li> <li> <span>Sit amet et consectetur</span> <ul> <li> <span>Quia adipit</span> <ul> <li> <span>aliquam quaerat</span> </li> <ul> </li> <li><span>Erit et nunquam</span></li> </ul> <li> </ul> maketoc.xslt 当前渲染图但是，这个 MWE 生成以下输出： <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0"> <xsl:output method="xml" indent="yes"/> <xsl:template match="document"> <ul> <xsl:apply-templates select="*[self::h1 | self::h2 | self::h3 | self::h4 | self::h5 | self::h6 | self::h7 | self::h8 | self::h9]"/> </ul> </xsl:template> <xsl:template match="h1 | h2 | h3 | h4 | h5 | h6 | h7 | h8 | h9"> <li> <span><xsl:value-of select="."/></span> <ul> <xsl:apply-templates select="following-sibling::*[1][self::h1 | self::h2 | self::h3 | self::h4 | self::h5 | self::h6 | self::h7 | self::h8 | self::h9]"/> </ul> </li> </xsl:template>  <xsl:template match="*"/> </xsl:stylesheet> 存在的问题如您所见，MWE 存在一些问题：同一兄弟节点中的第一个降序节点会被处理多次。它们的加工程度与深度相同。例如“aliquam quaerat”出现树次，因为他是一个 <ul> <li> <span>Lorem arepo ipsum dolor</span> <ul> <li> <span>Lorem ipsum dolor</span> <ul/> </li> </ul> </li> <li> <span>Lorem ipsum dolor</span> <ul/> </li> <li> <span>sit amet et consectetur</span> <ul> <li> <span>Quia adipit</span> <ul> <li> <span>aliquam quaerat</span> <ul/> </li> </ul> </li> </ul> </li> <li> <span>Quia adipit</span> <ul> <li> <span>aliquam quaerat</span> <ul/> </li> </ul> </li> <li> <span>aliquam quaerat</span> <ul/> </li> <li> <span>Erit et nunquam</span> <ul/> </li> </ul> 节点。无用的<h3>有时会出现在内部没有任何</ul>的<li>体内。不是其兄弟姐妹之间第一个的节点将被视为 <ul>。（参见“Erit et nunquam”的案例，他是 <h1>。问题如何使 xml 的标题节点位于级联 <h2>-<ul> 结构中，并且后代与其后代密切相关？假设 XSLT 3（或 2，但下面使用一些 XSLT 3），这是使用 <li>: 进行递归分组的任务 for-each-group group-starting-with <xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xs="http://www.w3.org/2001/XMLSchema" xmlns:mf="http://example.com/mf" exclude-result-prefixes="#all" version="3.0"> <xsl:function name="mf:group" as="node()*"> <xsl:param name="headings" as="element()*"/> <xsl:param name="level" as="xs:integer"/> <xsl:for-each-group select="$headings" group-starting-with="*[local-name() = 'h' || $level]"> <xsl:if test="self::*[local-name() = 'h' || $level]"> <li> <span> <xsl:apply-templates/> </span> <xsl:where-populated> <ul> <xsl:sequence select="mf:group(tail(current-group()), $level + 1)"/> </ul> </xsl:where-populated> </li> </xsl:if> </xsl:for-each-group> </xsl:function> <xsl:mode on-no-match="shallow-copy"/> <xsl:output method="xml" indent="yes"/> <xsl:template match="document"> <ul> <xsl:sequence select="mf:group(*[self::h1 | self::h2 | self::h3 | self::h4 | self::h5 | self::h6 | self::h7 | self::h8 | self::h9], 1)"/> </ul> </xsl:template> </xsl:stylesheet> 有您原始代码中的选择，我可能倾向于将其写为<xsl:sequence select="mf:group(*[self::h1 | self::h2 | self::h3 | self::h4 | self::h5 | self::h6 | self::h7 | self::h8 | self::h9], 1)"/>。

xml xslt html-lists html-heading

回答 1 投票 0

你可以设计有序列表数字的样式吗？

我正在尝试对有序列表中的数字进行样式设置，我想添加背景颜色、边框半径和颜色，以便它们与我正在使用的设计相匹配：我想这是不可能的，我必须使用

html css html-lists sprite

回答 5 投票 0

从 1.1 开始的嵌套 HTML 有序列表

（警告：我对 HTML 编码还比较陌生......）我希望我的嵌套 HTML 排序列表如下所示： 1.1 授权与认证 1.1.1 布拉布拉布拉 1.1.2 更多 bla bl...

html html-lists

回答 1 投票 0

单击时将活动类添加到导航栏元素

我是用导航栏创建的，我没有做过太多的Web开发。我是用导航栏创建的，我没有做过太多的Web开发。 <nav class="navbar navbar-custom navbar-light navbar-expand-md justify-content-center"> <button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2"> <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2"> <ul class="navbar-nav mx-auto text-center"> <li class="nav-item"><a class="nav-link" href="index.html"><strong style="text-transform:uppercase">home</strong></a></li> <li class="nav-item"><a class="nav-link" href="about.html"><strong style="text-transform:uppercase">about</strong></a></li> <li class="nav-item"><a class="nav-link" href="flights.html"><strong>FLIGHTS</strong></a></li> <li class="nav-item"><a class="nav-link" href="hotels.html"><strong>HOTELS</strong></a></li> <li class="nav-item"><a class="nav-link" href="holidays.html"><strong>HOLIDAYS</strong></a></li> <li class="nav-item "><a class="nav-link" href="property.html"><strong>PROPERTY</strong></a></li> <li class="nav-item active"><a class="nav-link" href="car_hire.html"><strong>CAR HIRE</strong></a></li> </ul> </div> </nav> 此导航栏链接到所有其他页面的顶部，以减少代码的重复。有人可以帮助我编写代码，以便当单击菜单项时“活动”类被添加到 li 元素中。然后这会触发 css。 CSS： .nav-link.active { color: white; } 谢谢你您所要做的就是循环遍历链接，检查当前单击的链接是否与当前页面相同，然后将 active class 和 aria-current 设置为该项目。将此代码添加到您的 JavaScript 中 document.querySelectorAll(".nav-link").forEach((link) => { if (link.href === window.location.href) { link.classList.add("active"); link.setAttribute("aria-current", "page"); } }); 这里是纯 JavaScript 中满足您需求的完整代码。希望对你有帮助 const links = document.querySelectorAll('.nav-link'); if (links.length) { links.forEach((link) => { link.addEventListener('click', (e) => { links.forEach((link) => { link.classList.remove('active'); }); e.preventDefault(); link.classList.add('active'); }); }); } .nav-link.active { color: white; } <nav class="navbar navbar-custom navbar-light navbar-expand-md justify-content-center"> <button class="navbar-toggler ml-1" type="button" data-toggle="collapse" data-target="#collapsingNavbar2" > <span class="navbar-toggler-icon"></span> </button> <div class="navbar-collapse collapse justify-content-between align-items-center w-100" id="collapsingNavbar2" > <ul class="navbar-nav mx-auto text-center"> <li class="nav-item"> <a class="nav-link" href="index.html"> <strong style="text-transform: uppercase">home</strong> </a> </li> <li class="nav-item"> <a class="nav-link" href="about.html"> <strong style="text-transform: uppercase">about</strong> </a> </li> <li class="nav-item"> <a class="nav-link" href="flights.html"> <strong>FLIGHTS</strong> </a> </li> <li class="nav-item"> <a class="nav-link" href="hotels.html"> <strong>HOTELS</strong> </a> </li> <li class="nav-item"> <a class="nav-link" href="holidays.html"> <strong>HOLIDAYS</strong> </a> </li> <li class="nav-item"> <a class="nav-link" href="property.html"> <strong>PROPERTY</strong> </a> </li> <li class="nav-item active"> <a class="nav-link" href="car_hire.html"> <strong>CAR HIRE</strong> </a> </li> </ul> </div> </nav> 使用 classList 和 toggle document.querySelectorAll(".nav-item").forEach((ele) => ele.addEventListener("click", function (event) { event.preventDefault(); document .querySelectorAll(".nav-item") .forEach((ele) => ele.classList.remove("active")); this.classList.add("active") }) ); .active { color: green; } <ul class="navbar-nav mx-auto text-center"> <li class="nav-item"><a class="nav-link" ><strong style="text-transform:uppercase">home</strong></a></li> <li class="nav-item"><a class="nav-link" ><strong style="text-transform:uppercase">about</strong></a></li> <li class="nav-item"><a class="nav-link" ><strong>FLIGHTS</strong></a></li> <li class="nav-item"><a class="nav-link" ><strong>HOTELS</strong></a></li> <li class="nav-item"><a class="nav-link" ><strong>HOLIDAYS</strong></a></li> <li class="nav-item "><a class="nav-link" ><strong>PROPERTY</strong></a></li> <li class="nav-item active"><a class="nav-link" ><strong>CAR HIRE</strong></a></li> </ul> 我要疯了 <script> const links = document.querySelectorAll('.nav-link'); if (links.length) { links.forEach((link) => { link.addEventListener('click', (e) => { links.forEach((link) => { link.classList.remove('active'); }); e.preventDefault(); link.classList.add('active'); }); }); } </script> 适用于班级更改，但链接不起作用 //active nav bar //getting the link const fullLink = window.location.pathname; //isolating the page name const activeLink = fullLink.split('/').pop().replace('.html', ''); //passing the page name through the function function setActiveClass(elementId) { //getting the element that has the id of the page name const element = document.getElementById(elementId); //checking if the element is valid if (element) { //adding class active to the element element.classList.add('active'); } } //function getting called when page refresh of change of page and passing through the page name setActiveClass(activeLink); 在你的JS中添加以下代码： $(".nav-item").click(function() { $(".nav-item").removeClass("active"); // This will remove active classes from all <li> tags $(this).addClass("active"); // This will add active class in clicked <li> });

javascript html css html-lists navbar

回答 6 投票 0

ASP.NET如何从<li>调用OnCommand？

<asp:ListView ID="CategoryList" runat="server"> <ItemTemplate> <ul id="container"> <li> <img src="<%# Eval("CategorieAfbeelding")%>" alt=""> <p><%# Eval("CategorieNaam")%></p> </li> </ul> </ItemTemplate> </asp:ListView> 在上面的代码中，我想要它，所以当我单击列表项时，我会触发一个函数，为后面的代码提供 <%# Eval("CategorieNaam")%>。我通常这样使用 OnCommand="btnMoreInfo_Command" CommandArgument='<%# Eval("CategorieNaam")%>' 但这适用于 ASP 按钮而不是列表项。我尝试在列表项上使用 OnCommand 函数。我还尝试制作一个不可见的 asp 按钮，但这只会造成混乱。不可能将项目放入 asp 按钮中，这也使其不实用。只需使用按钮（或ImageButton）标准点击事件即可。所以，说这个ListView： <asp:ListView ID="ListView1" runat="server" DataKeyNames="ID" > <ItemTemplate> <tr style=""> <td><asp:Label ID="FighterLabel" runat="server" Text='<%# Eval("Fighter") %>' /></td> <td><asp:Label ID="EngineLabel" runat="server" Text='<%# Eval("Engine") %>' /></td> <td><asp:Label ID="ThrustLabel" runat="server" Text='<%# Eval("Thrust") %>' /></td> <td><asp:Label ID="DescriptionLabel" runat="server" Text='<%# Eval("Description") %>' /></td> <td> <asp:ImageButton ID="ImageView" runat="server" Width="200px" ImageUrl='<%# Eval("ImagePath") %>' OnClick="ImageView_Click" /> </td> </tr> </ItemTemplate> <LayoutTemplate> <table id="itemPlaceholderContainer" runat="server" class="table table-hover"> <tr runat="server" style=""> <th runat="server">Fighter</th> <th runat="server">Engine</th> <th runat="server">Thrust</th> <th runat="server">Description</th> <th runat="server">View</th> </tr> <tr id="itemPlaceholder" runat="server"> </tr> </table> </LayoutTemplate> </asp:ListView> 请注意，如果可能，我强烈建议对 GridView 或 ListView 使用数据键。原因是您可以轻松获取数据库 PK 行值，但不必在标记中公开甚至显示数据库 PK 行值。所以，上面加载的代码是这样的： protected void Page_Load(object sender, EventArgs e) { if (!IsPostBack) LoadData(); } void LoadData() { ListView1.DataSource = General.MyRst("SELECT * FROM Fighters ORDER BY Fighter"); ListView1.DataBind(); } 现在的结果是这样的：因此，在上面，我们有一个按钮单击（图像按钮）。下面展示了简单的按钮点击事件如何获取行信息。 protected void ImageView_Click(object sender, ImageClickEventArgs e) { ImageButton btn = (ImageButton)sender; ListViewItem lvRow = (ListViewItem)btn.NamingContainer; Debug.Print($"Row index click = {lvRow.DisplayIndex}"); int PK = Convert.ToInt32(ListView1.DataKeys[lvRow.DisplayIndex]); Debug.Print($"Data base primary key value = {PK}"); Debug.Print($"Image URL of button click = {btn.ImageUrl}"); // get control value from the row. Label Engine = (Label)lvRow.FindControl("EngineLabel"); Debug.Print($"Engine = {Engine.Text}"); } 因此，上面展示了如何获取信息行索引、数据库 PK 值，甚至如何从给定行中提取控件。 ListView、Repeater、GridView 等都支持使用“命名容器”，这将返回行单击对象。在示例标记中，您没有显示行单击是如何发生的。但是，作为一般规则，您要从中提取当前行值的任何控件？此类控件应该是服务器端控件，像大多数控件一样具有“id”，因此您可以使用 findcontrol 从给定控件获取值。在某些情况下，为了“轻松”编码，我经常会动态地添加一些附加按钮属性。所以，点击上面的图像按钮可以这样说： <asp:ImageButton ID="ImageView" runat="server" Width="200px" ImageUrl='<%# Eval("ImagePath") %>' OnClick="ImageView_Click" FighterName = '<%# Eval("Fighter") %>' PKID = '<%# Eval("ID") %>' /> 所以，我“编造”了 PKID 和 FighterName 属性。因此，在按钮单击的代码后面，我可以简单地使用添加到按钮单击的“自定义”属性。例如： protected void ImageView_Click(object sender, ImageClickEventArgs e) { ImageButton btn = (ImageButton)sender; Debug.Print($"Fighter name = {btn.Attributes["FighterName"]}"); Debug.Print($"PKID = {btn.Attributes["PKID"]}"); 因此，在大多数情况下，您可以（并且应该）使用行项的 FindControl 方法。但是，为了便于使用，我经常会在给定的行按钮单击中添加一些额外的自定义属性。

c# asp.net function html-lists

回答 1 投票 0

HTML - 在页面左侧和右侧同一行列出项目

我正在创建一个网站，它将作为我的简历。我的名字居中，下面是我的联系方式。在左边，我将用两行写下我的地址，在右边......

html css html-lists css-float

回答 1 投票 0

HTML/CSS/Javascript：使用 javascript 更改 ul-li:before backround-image

我有一个 div，其中包含一个 ul，其中有一个自定义图像作为标记： HTML：自定义列表我有一个 div，其中包含一个 ul，其中有一个自定义图像作为标记： HTML： <div class="block"> <h2>Custom List</h2> <div class="ul-custom"> <ul> <li>...</li> <li>..</li> <li>...</li> </ul> </div> </div> CSS： .ul-custom { ul { list-style: none; padding-left: 0; margin: 0; li { position: relative; padding-left: 20px; &:before { content: ""; width: 15px; height: 26px; position: absolute; background-image: url("li-red.png"); background-size: contain; background-position: center; background-repeat: no-repeat; left: 0; top: 0; } } } } 我现在的问题是，由于我在 li:before 中有图像，有没有办法更改 javascript 中的 url？我已经搜索过但找不到任何内容，但我确信互联网上已经有关于此的内容。希望有人可以帮助我，提前谢谢！或者是否有一种“更简单”或“更好”的方法将自定义图像放在 li 上，以便可以通过 javascript 进行更改？如果我理解正确的话，你想使用javascript替换背景图像（“li-red.png”）。你应该能够这样做： // Select the li elements const liElements = document.querySelectorAll('.ul-custom li'); // Function to change the background image function changeBackgroundImage(element, newImageUrl) { element.style.backgroundImage = `url("${newImageUrl}")`; } // Example usage: Change the background image of the first li element // Use this function where you want it to be called changeBackgroundImage(liElements[0], 'new-image.png'); 感谢@CBroe，解决方案非常简单。 HTML-代码如上： <div class="block"> <h2>Custom List</h2> <div class="ul-custom"> <ul> <li>...</li> <li>..</li> <li>...</li> </ul> </div> </div> CSS（新）： .ul-custom ul { list-style: none; padding-left: 0; margin: 0; } .ul-custom ul li { position: relative; padding-left: 20px; } .ul-custom ul li:before { content: ""; width: 15px; height: 15px; position: absolute; background-size: contain; background-position: center; background-repeat: no-repeat; left: 0; top: 0; } .ul-custom.marker-1 ul li:before { background-image: url("..."); } .ul-custom.marker-2 ul li:before { background-image: url("..."); } .ul-custom.marker-3 ul li:before { background-image: url("..."); } .ul-custom.marker-4 ul li:before { background-image: url("..."); } Javascript： let ul = document.querySelectorAll(".ul-custom"); ul.forEach((list) => { switch (...) { case "...": list.classList.add("marker-2"); break; case "...": list.classList.add("marker-3"); break; case "...": list.classList.add("marker-4"); break; default: list.classList.add("marker-1"); break; } })

javascript html css html-lists

回答 2 投票 0

ReactJS 中活动链接的背景颜色

我一直在为我的 React 应用程序侧边栏设计样式部分。我拥有的是一个项目列表，每个项目都会路由到不同的页面。所以，现在我想通过...

css reactjs hyperlink routes html-lists

回答 6 投票 0

如何定位内层ul的第一个li？

我正在寻找一些CSS来增加li和li li之间的填充。正如您在图片中看到的，缩进列表太靠近 li 的底部。我可以写什么CSS来阻止这种情况

css html-lists

回答 1 投票 0

html-lists 相关问题

最新问题