正文 

当前位置： 首页 > 知识 >

如何分别为wordpress导航的每个列表项背景设置样式

     2023-04-13     148

关键词：

【中文标题】如何分别为wordpress导航的每个列表项背景设置样式【英文标题】：How to style each list item background of the wordpress navigation separately 【发布时间】：2014-07-29 05:00:06 【问题描述】：

所以我正在使用标准的 wordpress 导航，当列表项内的链接处于活动状态时，我需要更改每个菜单项的背景。

.current-menu-item 对所有列表项都有效，但问题是我对每个元素都有相同的样式。

例如：

<nav>
    <div>
        <ul>
            <li>
              <a href="index.html">home</a>
            </li>
            <li>
              <a href="portfolio.html">portfolio</a>
            </li>
        </ul>
    </div>
</nav>

有人有这方面的经验吗？

我尝试使用以下页面：http://codex.wordpress.org/Function_Reference/wp_nav_menu 但不幸的是没有任何结果..

使用子选择器也不起作用..

【问题讨论】：

【参考方案1】：

听起来您希望每个单独的链接都有不同的活动状态。 .current-menu-item 捕获活动链接，但不为每个单独的链接提供自定义。

我认为您可以结合使用 nth-child 和 .current-menu-item。你知道 .current-menu-item 在哪里应用吗？如果它在&lt;li&gt; 上，这应该可以：

nav li:nth-child(1).current-menu-item 
    background-color: red;

nav li:nth-child(2).current-menu-item 
    background-color: blue;

nav li:nth-child(3).current-menu-item 
    background-color: green;

在小提琴中看到它：http://jsfiddle.net/Dz32R/

【讨论】：

如何更改导航项（按钮）的背景图像？

】如何更改导航项（按钮）的背景图像？【英文标题】：Howtochangebackgroundimagefornavigationitem(button)?【发布时间】：2012-05-0510:34:16【问题描述】：我想为每个导航项（按钮）设置背景图片（通用）。这些图像应该看起来如何？是否... 查看详情

离子框架：每个列表项的不同背景颜色

...果来说，它会是绿色的对于橙色，它将是黄色...有人知道如何实现这一目标吗？我尝试过使 查看详情

WordPress：将空列表项添加到导航菜单

】WordPress：将空列表项添加到导航菜单【英文标题】：WordPress:Addemptylist-itemtonavigationmenu【发布时间】：2013-09-1014:31:27【问题描述】：<ulid="menu-primary"><li></li><li></li><li></li><liclass="stretcher"&g 查看详情

如何添加带有空白导航标签的 Wordpress 菜单项？ [关闭]

】如何添加带有空白导航标签的Wordpress菜单项？[关闭]【英文标题】：HowtoaddaWordpressMenu-Itemwithblanknavigationlabel?[closed]【发布时间】：2020-01-1119:13:07【问题描述】：我尝试设置一个没有导航标签的菜单项。https://1drv.ms/u/s!AikSNhBAk4teuB... 查看详情

WordPress（标题/导航栏）上同一图像的不同背景位置以及如何使它们相同？

】WordPress（标题/导航栏）上同一图像的不同背景位置以及如何使它们相同？【英文标题】：DifferentbackgroundpositionsofthesameimageonWordPress(header/navbar)andhowtomakethemsame?【发布时间】：2018-12-2203:27:44【问题描述】：我正在WordPress上开发web... 查看详情

悬停在列表项上时更改背景图像

...应将背景更改为不同的图像。我该怎么做呢？我只找到了如何更改为单个而不是多个图像的答案。这是屏幕截图。我已经将鼠标悬停 查看详情

需要将“活动”类添加到自定义 WordPress 导航菜单

】需要将“活动”类添加到自定义WordPress导航菜单【英文标题】：Needtoadd\'active\'classtocustomWordPressNavigationMenu【发布时间】：2019-11-0922:41:53【问题描述】：我正在使用WordPress中的内置导航菜单创建自己的超级菜单。为标准菜单项... 查看详情

wordpress 中突出显示的多个菜单项

】wordpress中突出显示的多个菜单项【英文标题】：Multiplemenuitemshighlightedinwordpress【发布时间】：2012-09-1511:42:31【问题描述】：我已经在互联网上搜索了几个小时并找到了类似的问题，但都没有答案，所以我来这里寻求支持。我使... 查看详情

仅通过滚动更改引用每个菜单项的背景图像

...布时间】：2017-01-0323:28:05【问题描述】：我正在开发一个wordpress主题，它具有通过悬停菜单项来更改背景图像的功能（每个菜单项都附加了不同的图像）。在移动设备上，我想通过滚动来改变背景图片，这样观众就不需要点击每... 查看详情

ch6列表和导航条

为列表添加定制的项目符号　　可使用list-style-image属性：缺点是对项目符号图像的位置的控制能力不强。　　常用的方法：使用list-style-type来关闭项目符号，将定制的项目符号作为背景添加在列表元素上，使用背景图像的定位... 查看详情

如何分别为每个imageview设置延迟？(代码片段)

我为我正在研究的Blackjack应用程序编写了以下方法。publicvoidshowCard(Viewview)startButton.setVisibility(View.INVISIBLE);hitButton.setVisibility(View.VISIBLE);standbutton.setVisibility(View.VISIBLE);CarddealtCardOnePlayer 查看详情

如何在 Android 中更改列表项的背景颜色？

】如何在Android中更改列表项的背景颜色？【英文标题】：HowtoChangebackgroundcoloroflistiteminAndroid?【发布时间】：2013-11-0409:22:25【问题描述】：如何在android中更改列表项onlongclick的背景颜色，现在我通过以下代码获取列表项onlongclick... 查看详情

单击时如何使列表视图导航到另一个页面

】单击时如何使列表视图导航到另一个页面【英文标题】：Howtomakelistviewthatnavigatetoanotherpagewhenclicked【发布时间】：2021-11-2217:52:26【问题描述】：我想制作listview，当用户单击列表项时，它将导航到具有标题、长文本和图像的其... 查看详情

如何在引导程序中左右对齐导航栏的列表项

】如何在引导程序中左右对齐导航栏的列表项【英文标题】：Howtoleftandrightalignlistitemsfornavbarinbootstrap【发布时间】：2015-11-1803:26:40【问题描述】：我正在尝试使用引导程序放置导航栏以放置一些列表项。在下面显示的图像中，我... 查看详情

SwiftUI：如何让列表视图中的图像与列表项的操作不同？

】SwiftUI：如何让列表视图中的图像与列表项的操作不同？【英文标题】：SwiftUI:howtohaveimageinlistviewnothavesameactionaslistitem?【发布时间】：2021-05-3114:14:06【问题描述】：我在视图中有一个列表。在列表中，items被迭代以填充列表。当... 查看详情

Android：如何更改列表视图中列表项的背景颜色，由 SimpleCursorAdapter 管理

】Android：如何更改列表视图中列表项的背景颜色，由SimpleCursorAdapter管理【英文标题】：Android:howtochangethebackgroundcolorsoflistitemsinalistview,managedbySimpleCursorAdapter【发布时间】：2015-03-1122:32:05【问题描述】：您好，我是Android的新手，... 查看详情

Android 更改导航视图菜单背景

...背景，但我不知道该怎么做。我看过的所有帖子都解释了如何更改每个菜单项背景，但我只需要更改菜单的整个背景。这是我要改变的，整个白色背景：activity_main_drawer.xml：<?xmlver 查看详情

pyqt4：如何分别为qtabwidget中的每个选项卡着色？(代码片段)

我正在开发一个带有GUI的项目，我正在使用Python和PyQt4模块。这是我的演示代码：importsysfromPyQt4importQtGui,QtCoreclassWindow(QtGui.QMainWindow):def__init__(self):super(Window,self).__init__()self.setWindowTitle('PyQt4demo')self.setG 查看详情