个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
我需要更改选定的子菜单背景颜色。但是，当我单击子菜单时，我不知道如何更改背景颜色。
jsfiddle:http://jsfiddle.net/BJQ6y/
我的 CSS 代码:
.menuContent { background-image:url("../images/new.png"); border:1px solid #C7C7C7; bottom: 0px; position: fixed; width:100%; margin: 0 auto; text-align: center; -moz-border-radius-topright: 10px; -moz-border-radius-topleft: 10px; border-top-right-radius: 10px; border-top-left-radius: 10px; -moz-box-shadow: 3px -3px 5px #B8B8B8; -webkit-box-shadow: 3px -3px 5px #B8B8B8; box-shadow: 3px -3px 5px #B8B8B8; }
.menuContent a.slider { background-color:#fff; background-image: -moz-linear-gradient(center top, #ddd, #FFF); background-image: -webkit-gradient(linear, center top, center bottom, from(#ddd), to(#FFF)); border: 1px solid #C7C7C7; border-bottom:none; cursor: pointer; float:right; height: 8px; margin:-15px 30px 0 0; padding:3px 20px; width: 8px; z-index: 2001; -moz-border-radius-topright: 7px; -moz-border-radius-topleft: 7px; border-top-right-radius: 7px; border-top-left-radius: 7px; -moz-box-shadow: 3px -2px 3px #B8B8B8; -webkit-box-shadow: 3px -2px 3px #B8B8B8; box-shadow: 3px -2px 3px #B8B8B8; }
.menuContent a.slider img { padding-bottom: 3px; }
#nav { list-style: none; padding: 0px; margin: 0px; }
#nav li { display: inline-block; background: #222; }
#nav li a { color:#858585; font-weight: bold; display: block; padding: 15px 25px; text-align:center; text-decoration:none; width: auto; -moz-border-radius-bottomright: 10px; -moz-border-radius-topleft: 10px; text-transform:uppercase; min-width: 125px; }
#nav li li a { padding: 10px 5px; text-align: left; }
#nav li li li a { padding: 7px 5px; text-align: left; }
#nav li ul { background: #333; margin: 0px; padding: 0px; }
#nav li a:hover, #nav li a.active, #nav li a.sel { background-color:#fff; color: #222; }
#nav li ul { display:none; }
#nav li ul li { background: #CCC; }
#nav li ul li ul{ background: #222; }
#nav li ul li li { background: #600; }
#nav li ul li { margin: 5px 0; display: block; }
#nav li a img { border-width: 0px; margin-right: 8px; vertical-align: middle; }
#nav ul li a img { background: url("../images/bulb.png") no-repeat; border-width:0px; height:16px; line-height:22px; vertical-align:middle; width:16px; }
#nav li ul li { border-bottom: 1px solid #ccc; }
#nav li li ul { margin-left: 25px; }
我的 Html CLde
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>Bharatanatyam</title>
<link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script>
$(function(){
$('.slider').click(function () {
$('#nav').slideToggle(300);
var img = $(this).find('img');
if ($(img).attr('id') == 'bot') {
$(img).attr('src', 'images/arrow_top.png');
$(img).attr('id', 'top');
} else {
$(img).attr('src', 'images/arrow_bottom.png');
$(img).attr('id', 'bot');
}
});
$('.sub').click(function () {
var cur = $(this).prev();
$('#nav li ul').each(function() {
if ($(this)[0] != $(cur)[0])
$(this).slideUp(300);
});
$(cur).slideToggle(300);
});
$('.sub_menu').click(function () {
var cur = $(this).prev();
$('#nav li li ul').each(function() {
if ($(this)[0] != $(cur)[0])
$(this).slideUp(300);
//$(this).css("background", "red");
});
$(cur).slideToggle(300);
});
});
</script>
</head>
<body>
<div class="menuContent"> <a class="slider"><img alt="" id="bot" src="images/arrow_bottom.png"></a>
<ul id="nav">
<li>
<ul id="1">
<li>
<ul id="2">
<li><a href="#">Profile</a></li>
<li><a href="#">Presentations</a></li>
<li><a href="#">Recitals</a></li>
<li><a href="#">Awards</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Calendar</a></li>
<li><a href="#">downloads</a></li>
</ul>
<a href="#" class="sub_menu">Bharatanatyam</a></li>
<li>
<ul id="3">
<li><a href="#">Profile</a></li>
<li><a href="#">Presentations</a></li>
<li><a href="#">Recitals</a></li>
<li><a href="#">Awards</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Calendar</a></li>
<li><a href="#">downloads</a></li>
</ul>
<a href="#" class="sub_menu">Kuchipudi</a></li>
</ul>
<a href="#" class="sub sel" tabindex="1">Sailaja</a> </li>
<li>
<ul id="4">
<li><a href="#">About Sailasudha</a></li>
<li><a href="#">Admission</a></li>
<li><a href="#">Presentation</a></li>
<li><a href="#">Recticals</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Calendar</a></li>
<li><a href="#">Downloads</a></li>
</ul>
<a href="#" class="sub" tabindex="1">Sailasudha</a> </li>
<li>
<ul id="5">
<li><a href="#">Philosophy</a></li>
<li>
<ul id="6">
<li><a href="#">Artist</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Media</a></li>
</ul>
<a href="#" class="sub_menu" >Year 1</a></li>
<li><ul id="7">
<li><a href="#">Artist</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Media</a></li>
</ul><a href="#" class="sub_menu" >Year 2</a></li>
<li><ul id="8">
<li><a href="#">Artist</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Media</a></li>
</ul><a href="#" class="sub_menu" >Year 3</a></li>
<li><ul id="9">
<li><a href="#">Artist</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Media</a></li>
</ul><a href="#" class="sub_menu" >Year 4</a></li>
<li><ul id="10">
<li><a href="#">Artist</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Media</a></li>
</ul><a href="#" class="sub_menu" >Year 5</a></li>
<li><a href="#">Artist</a></li>
<li><a href="#">Gallery</a></li>
<li><a href="#">Media</a></li>
</ul>
<a href="#" class="sub" tabindex="1">Nrityanasangama</a> </li>
<li><a href="#">Contact Us</a></li>
</ul>
</div>
</body>
</html>
我的疑问:
当我点击“Kuchipudi”菜单时，它的子菜单将会打开。届时“Kuchipudi”背景将随着所选菜单的变化而变化。
当我单击“Bharatanatyam”菜单时，它的子菜单将打开。那时“Kuchipudi”背景将像以前一样改变，“Bharatanatyam”背景颜色将根据所选菜单改变。我不知道如何改变，它的背景颜色改变了。
最佳答案
这个编辑对你的 fiddle 有用吗:
$('.sub_menu').click(function () {
$('a.submenu').removeClass('selected');
$(this).addClass('selected');
var cur = $(this).prev();
$('#nav li li ul').each(function() {
if ($(this)[0] != $(cur)[0])
$(this).slideUp(300);
});
$(cur).slideToggle(300);
);
然后添加这个 CSS:
.selected{background-color:#eee; //or whatever colour
关于javascript - 更改所选菜单的背景颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18272878/
25
4
0
我正在阅读 java swing，但在理解它时遇到问题。 Color 是一个类吗？ Color[] col= {Color.RED,Color.BLUE}; 这在java中是什么意思？ 最佳答案 Is
我正在研究用 python 编写的 pacman 程序。其中一个模块是处理吃 bean 游戏的图形表示。这当然是一些主机颜色。列表如下: GHOST_COLORS = [] ## establishe
本网站:http://pamplonaenglishteacher.com 源代码在这里:https://github.com/Yorkshireman/pamplona_english_teache
我最近将我的手机更新为 Android Marshmallow 并在其上运行了我现有的应用程序，但注意到颜色行为有所不同:将更改应用到 View (可绘制)的背景时，共享相同背景的所有 View (引
所有 X11/w3c 颜色代码在 Android XML 资源文件格式中是什么样的？ I know this looks a tad ridiculous as a question, but giv
试图让 ffmpeg 创建音频波形，同时能够控制图像大小、颜色和幅度。我已经尝试过这个(以及许多变体)，但它只是返回无与伦比的 "。 ffmpeg -i input -filter_complex "
我很好奇你是否有一些关于 R 中颜色酿造的技巧，对于许多独特的颜色，以某种方式使图表仍然好看。 我需要大量独特的颜色(至少 24 种，可能需要更多，~50 种)用于堆叠区域图(所以不是热图，渐变色不起
我看到的许多 WPF 示例和示例似乎都有硬编码的颜色。这些指南 - http://msdn.microsoft.com/en-us/library/aa350483.aspx建议不要硬编码颜色。在构建
我想更改文件夹的默认蓝色 如何设置？ 最佳答案 :hi Directory guifg=#FF0000 ctermfg=red 关于Vim NERDTree 颜色，我们在Stack Overflow上
是否有关于如何将任意字符串哈希为 RGB 颜色值的最佳实践？或者更一般地说:3 个字节。 你问:我什么时候需要这个？这对我来说并不重要，但想象一下任何 GitHub 上的那些管图 network pa
我正在尝试将默认颜色设置为自定义窗口小部件。 这是有问题的代码。 class ReusableCard extends StatelessWidget { ReusableCard({this.
import javax.swing.*; import javax.swing.table.DefaultTableCellRenderer; import javax.swing.table.Ta
我有一个 less 文件来定义一堆颜色/颜色。每个类名都包含相关颜色的名称，例如 .colourOrange{..} 或 .colourBorderOrange{..} 或 navLeftButtOr
我有一个RelativeLayout，我需要一个黑色背景和一个位于其中间的小图像。我使用了这段代码: 其中@drawable/bottom_box_back是: 这样我就可以将图像居中了。但背
我需要设置 浅色 的 JPanel 背景，只是为了不覆盖文本(粗体黑色)。 此刻我有这个: import java.util.Random; .... private Random random =
我正在尝试制作一个自定义文本编辑器，可以更改特定键入单词的字体和颜色。如何更改使用光标突出显示的文本的字体和/或颜色？ 我还没有尝试过突出显示部分。我尝试获取整个 hEdit(HWND) 区域并更改字
我想改变我整个应用程序的颜色。 在我的 AndroidManfiest.xml 中，我有正确的代码: 在 values 文件夹中，我有 app_theme.xml: @style/MyAc
是否可以使用 android 数据绑定(bind)从 xml 中引用颜色？ 这很好用: android:textColor="@{inputValue == null ? 0xFFFBC02D : 0
有没有办法在 Android 应用程序中设置“空心”颜色？ 我的意思是我想要一个带有某种背景的框，而文本实际上会导致背景透明。换句话说，如果整个 View 在蓝色背景上，文本将是蓝色的，如果它是红色的
我用CGContextStrokePath画在白色背景图片中的一条直线上，描边颜色为红色，alpha为1.0画线后，为什么点不是(255, 0, 0)，而是(255, 96, 96)为什么不是纯红色？
我是一名优秀的程序员,十分优秀！