ZhiYuanYe 2016-09-24 13:01 采纳率: 33.3%
浏览 893
已采纳

关于js，css的一个问题

怎样实现这个导航菜单？
功能：点击导航其中一个栏目变色，再点击页面其他地方，导航没有变化
点击导航另一个栏目变色，并且之前的栏目恢复到未点击之前的状态

h5：

 <html>
<head>
    <link href="navigation.css" rel="stylesheet" type="text/css" />
    <script language="javascript" src="jquery-1.8.3.min.js"></script>
    <script type="text/javascript">
$(function(){
    $(".menu a").focus(function(){

        $(this).addClass("cur").siblings().removeClass("cur");
    })
})
</script>
</head>
<body>
  <div class="menu">
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <del></del>
  </div>
</body>
</html>

css：

.menu a{
    display:block;
    float:left;
}
.menu
{
    font-size:14px; 
    line-height:14px;
    background:url("image/navigation/bg1.jpg") repeat-x left bottom;
    background-color:#f7f7f7;
    margin-bottom:24px;
    font-family:"Arial","Tahoma","微软雅黑","黑体";
    line-height:18px;
    padding:0px;
    margin:0px;
    text-align:center;
}
.menu a:link,.menu a:visited
{
    color:#383737;
    background-color:#f7f7f7;
    border-bottom:solid 2px #e6e6e6;    
    text-decoration:none;
    padding:10px 16px 10px 16px;
}
.menu a:hover,.menu a:focus
{
    background-color:#646464;
    border-bottom:solid 2px #2e2e2e;
    color:#fff;
}
.cur
{
    background-color:#646464;
    border-bottom:solid 2px #2e2e2e;
    color:#fff;
}
  • 写回答

8条回答

  • 浊世清欢 2016-09-25 16:39
    关注
     <html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link href="navigation.css" rel="stylesheet" type="text/css" />
    <script language="javascript" src="jquery.js"></script>
    <script type="text/javascript">
$(function(){
  $(".menu a").click(function(event){
  var target = event.target;
  $(target).css("background-color","#646464").siblings().css("background-color","#ffffff");
  })
})
</script>
</head>
<body>
  <div class="menu">
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <a href="#">导航一</a>
    <del></del>
  </div>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(7条)

报告相同问题？

悬赏问题

  • ¥15 运筹学排序问题中的在线排序
  • ¥15 关于docker部署flink集成hadoop的yarn，请教个问题 flink启动yarn-session.sh连不上hadoop，这个整了好几天一直不行，求帮忙看一下怎么解决
  • ¥30 求一段fortran代码用IVF编译运行的结果
  • ¥15 深度学习根据CNN网络模型，搭建BP模型并训练MNIST数据集
  • ¥15 lammps拉伸应力应变曲线分析
  • ¥15 C++ 头文件/宏冲突问题解决
  • ¥15 用comsol模拟大气湍流通过底部加热（温度不同）的腔体
  • ¥50 安卓adb backup备份子用户应用数据失败
  • ¥20 有人能用聚类分析帮我分析一下文本内容嘛
  • ¥15 请问Lammps做复合材料拉伸模拟，应力应变曲线问题