一、点击展开导航栏二次点击关闭导航栏:
思路:利用 display:none 不占空间隐藏的特性:
核心代码:
if($("ul").css("display")=="none"){ ------------- 取出 css 中 display属性 的状态
$("ul").css("display","block"); ------------- 改变 css 中 display属性 的状态
$("li.frist").css("background","blue").css("font-size","14px").css("font-weight","bold").css("color","gray");
$("li").css("margin-bottom","24px").css("font-size","14px");
}else{
$("ul").css("display","none");
}
二、做出导航栏单击后拥有唯一的背景颜色:
思路一:利用 $(this) 选中被点击 标签:
<script type="text/javascript" src="../jquery/jquery.js"></script>
<script type="text/javascript">
$(function(){
// console.log("1")
$("li").click(function(){
$("li").css("background","none"); -------------- 清空之前记录的颜色
$(this).css("background","orange");
})
})
</script>
思路二:每个 li 都做 一个点击事件(要清空之前的背景颜色)
三、利用jquery 修改a标签的 属性(颜色、下划线 。。)
思考: .css() 与 addClass 的区别:
.css()它是修改标签的 style 属性 , 他的优先级 要高于 addClass() ,因为 h 和a标签有默认的style属性,他会覆盖 addClass 添加的属性 ,因此我们用 jquery 修改 h 和 a标签样式时 ,应该用.css()方法
1、
$("a").css("color","orange");
2、
$("a").addClass("orange"); ------------ 会被内部 覆盖
四、一个盒子多个背景图片的做法:
注意 : 同一个盒子只能做一个背景图片,后续的背景图会覆盖前面的背景图(无论是否填充),因此,想要在一 个盒子中加入多个背景图片需要在该盒子内部加入子盒子
例: