JQuery实现菜单栏样式切换怎么实现? 10C

左侧菜单栏用ul li编写,每个li里面放不同的背景图片,点击第一个li,该li的背景图片蓝色变成白色,点击第二个li,背景图片也变为白色,但是第一个li的背景图片变回蓝色,请问想写成通用的怎么写,无论多少个li加进去都可以这样,而不是通过事件一个一个变。

0

7个回答

HTML:

<ul class="menu">
  <li class="menu-item">1</li>
  <li class="menu-item">2</li>
  <li class="menu-item">3</li>
  <li class="menu-item">4</li>
</ul>

CSS:

.menu {
    width: 240px;
    margin: 0;
    padding: 0;
    border: 1px solid #eee;
    list-style: none;
}

.menu-item {
    height: 56px;
    border-bottom: 1px solid #eee;
    line-height: 56px;
    text-align: center;
    background-color: #fff;
    cursor: pointer;
}

.menu-item:last-child {
    border-bottom: 0;
}

.menu-item.active {
    background-color: #4bf;
}

JavaScript:

$(document).ready(function() {
  $('.menu').on('click', '.menu-item', function() {
    $(this).addClass('active').siblings().removeClass('active');
  });
});
0
u013455818
TPORL丶 回复weixin_38576043: 看新的回复
一年多之前 回复
weixin_38576043
weixin_38576043 回复TPORL丶: 因为要是移除的话,感觉没法把兄弟元素一块移除了,还得每个每个class写,不通用
一年多之前 回复
weixin_38576043
weixin_38576043 回复TPORL丶: 大神可以简单写一下么。。不太懂
一年多之前 回复
u013455818
TPORL丶 回复weixin_38576043: .menu-item-1.active 这样每个设置background-image 或者 给每个li标签一个data-*属性存储图片的地址 用jq的data()获取 再用css()设置
一年多之前 回复
u013455818
TPORL丶 回复weixin_38576043: 可以 给每个li一个单独的class .menu-item-1
一年多之前 回复
weixin_38576043
weixin_38576043 这个是改变背景色可以,我的每一个li的背景图片都不同,点击激活背景图片,兄弟元素背景图片不激活,这样怎么弄?
一年多之前 回复
 <html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题页</title>
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
     $(function(){
       toggleEvent(0);
       var mTitle = $(".menuTitle");
       mTitle.each(function(i){
        $(this).click(function(){
         toggleSlideEvent(i);
         $(this).css("border-bottom","1px #ccccff solid");
        });
       });
     });
     function toggleSlideEvent(i)
     {
      $("ul",".menu1").css("display","none");
      $("ul",".menu1").eq(i).slideDown();
      $(".menuTitle").each(function(){
        $(this).css("border-bottom","0px #ccccff solid");
      });
     }
     function toggleEvent(i)
     {
      $("ul",".menu1").css("display","none");
      $("ul",".menu1").eq(i).css("display","block");
      $(".menuTitle").eq(i).css("border-bottom","1px #ccccff solid");
     }
  </script>
  <style type="text/css">
    .menu1
    {
      border: 1px #CCCCFF solid;
      border-top: 0px;
      width: 160px;
    }
    .menuTitle
    {
      width: 100%;
      height: 26px;
      border-bottom: 0px #CCCCFF solid;
      border-top: 1px #CCCCFF solid;
      text-align: left;
      line-height: 26px;
      cursor: pointer;
    }
    ul
    {
      border: 0px #CCCCFF solid;
      width: 100%;
      margin-left: 0px;
      margin-top: 0px;
    }
    ul li
    {
      height: 36px;
      line-height:36px;
      border: 0px gray solid;
      margin-top: 0px;
      margin-left: 0px;
      padding-left:20px;
      list-style-type:none;
      /*background:url(images/Title.png);*/
    }
    ul li:hover
    {
      height: 36px;
      line-height:36px;
      border: 0px gray solid;
      margin-top: 0px;
      margin-left: 0px;
      padding-left:20px;
      list-style-type:none;
      /*background:url(images/Title.png);*/
      cursor:pointer;
    }
  </style>
</head>
<body>
  <form id="form1" runat="server">
  <div class="menu1">
    <div class="menuTitle">
      TITLE1</div>
    <ul>
      <li>Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
      <li>Menu4</li>
      <li>Menu5</li>
    </ul>
    <div class="menuTitle">
      TITLE2</div>
    <ul>
      <li>Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
      <li>Menu4</li>
      <li>Menu5</li>
    </ul>
    <div class="menuTitle">
      TITLE3</div>
    <ul>
      <li>Menu1</li>
      <li>Menu2</li>
      <li>Menu3</li>
      <li>Menu4</li>
      <li>Menu5</li>
    </ul>
  </div>
  </form>
</body>
</html>

0
weixin_38576043
weixin_38576043 这个不是吧。。
一年多之前 回复

改写id的样式表就可以啊

0
weixin_38576043
weixin_38576043 请问具体怎么改
一年多之前 回复

方法一:

<style>
    .menu {
        width: 240px;
        margin: 0;
        padding: 0;
        border: 1px solid #eee;
        list-style: none;
    }

    .menu-item {
        height: 56px;
        border-bottom: 1px solid #eee;
        line-height: 56px;
        text-align: center;
        background-size: 0;
        cursor: pointer;
    }

    .menu-item:last-child {
        border-bottom: 0;
    }

    .menu-item.active {
        background-size: 100%;
        /* 可以在这设置其他的 background-repeat 之类的 看需求 */
    }

    /* 不同的图片 */
    .menu-item-1 { background-image: url(https://placehold.it/240x57?text=1); }
    .menu-item-2 { background-image: url(https://placehold.it/240x57?text=2); }
    .menu-item-3 { background-image: url(https://placehold.it/240x57?text=3); }
    .menu-item-4 { background-image: url(https://placehold.it/240x57?text=4); }
</style>

<ul class="menu">
    <li class="menu-item menu-item-1"></li>
    <li class="menu-item menu-item-2"></li>
    <li class="menu-item menu-item-3"></li>
    <li class="menu-item menu-item-4"></li>
</ul>

<script>
$(document).ready(function() {
    $('.menu').on('click', '.menu-item', function() {
        $(this).addClass('active').siblings().removeClass('active');
    });
});
</script>

方法二:

<style>
    .menu {
        width: 240px;
        margin: 0;
        padding: 0;
        border: 1px solid #eee;
        list-style: none;
    }

    .menu-item {
        height: 56px;
        border-bottom: 1px solid #eee;
        line-height: 56px;
        text-align: center;
        cursor: pointer;
        /* 可以在这设置其他的 background-repeat 之类的 看需求 */
    }

    .menu-item:last-child {
        border-bottom: 0;
    }
</style>

<ul class="menu">
    <li class="menu-item" data-bg="https://placehold.it/240x57?text=1"></li>
    <li class="menu-item" data-bg="https://placehold.it/240x57?text=2"></li>
    <li class="menu-item" data-bg="https://placehold.it/240x57?text=3"></li>
    <li class="menu-item" data-bg="https://placehold.it/240x57?text=4"></li>
</ul>

<script>
$(document).ready(function() {
    $('.menu').on('click', '.menu-item', function() {
        var $menuItem = $(this);

        $menuItem.css('backgroundImage', 'url(' + $menuItem.data('bg') + ')');
        $menuItem.siblings().css('backgroundImage', 'none');
    });
});
</script>
0
weixin_38576043
weixin_38576043 第一种方法在点击之后,所有Li背景图片只能变成.menu-item.active 类里面的一张图片,不能把每一张背景图都变吧
一年多之前 回复

显示当前
隐藏除了当前的其他同级

0

<!DOCTYPE html>



tab标签




<!-- tab栏 -->

<!-- 对应显示内容 -->


title 11111


text here!!!text here!!!text here!!!text here!!!text here!!!


text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!




title 2222


text here!!!text here!!!text here!!


text here!!!text here!!!text here!!!text here!text here!!!text here!!!text here!!!




title 33333


text here!!!


text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!text here!!!




title 44444


text here!!!text here!!!text here!!!text here!!!text here!!!


text here!!!text







-2

$(document).ready(function() {
$('.menu').on('click', '.menu-item', function() {
$(this).addClass('active').siblings().removeClass('active');
});
});

-3
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
jQuery实现导航栏的样式切换
样式: ul{ margin: 0 auto; height: 50px; background-color: #369; } ul&amp;amp;gt;li{ text-decoration: none; display: inline-block; height: 50px; line-height: 50px; color: #fff; padding: 0 15px; border...
jquery实现菜单栏选择效果
js/jquery-1.8.3.min.js"> $(function(){         //获取url中的参数         $(".down_nav a").each(function(){         try{         var menuurl=$(this).attr('href');         if(window.location.toStr
如何实现office97样式的菜单栏?
如何实现office97样式的浮动菜单栏?当子窗口最大化时,其最大(小)按钮出现在浮动菜单栏上?
点击菜单栏实现内容切换
主要通过js以及css样式的设置来实现tab切换显示的效果
实现切换效果的样式
<div class="card_mes"> <div class="clearfloat"> <p> 金币</p><p>油量</p> </div> <div class="drop">
JQuery实现菜单栏点击+iframe跳转
界面代码。左边菜单栏,右边Iframe窗口 &lt;div id="left" class="left"&gt; &lt;div class='item'&gt; &lt;div class="firstitem"&gt;一级菜单-网址&lt;/div&gt; &lt;div class="secitem" url="http://www.baidu.com"&gt;二级菜单-百度&...
CSS/JQuery实现二级菜单栏下滑
CSS实现方法 使用相对定位和绝对定位,先隐藏二级栏目,鼠标经过后设为可见,并结合css动画效果。 li{list-style: none;text-align:center; } a{text-decoration: none;} li.item{ position: relative; width: 130px; background: r...
利用JQuery实现简单的菜单栏导航
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> *{ padding: 0px; margin: 0px; } #top{width:
js左侧菜单栏样式
js左侧菜单栏含二级菜单样式,平滑移动选择,只含左菜单样式
alt 切换 到 菜单栏的问题
java中按 alt 时 将焦点切换到菜单中(仅仅是 alt,不是组合键) rn 另,谁有能完美实现 记事本 的源代码,网上找到得尽是残本。。。
切换菜单栏js效果
用于切换菜单栏来改变菜单内容,切换菜单栏js效果
菜单栏上下切换背景
导航条切换,html5+css3鼠标经过平滑过渡进行背景切换
jQuery实现单击变换样式
jQuer实现点击变换样式 *{margin: 0;padding: 0;} ul{width: 700px;margin:200px auto;} ul li{display:inline;border:1px solid #dcdcdc;border-radius:10px;padding:7px 20px;font-size:24px;} .add{background-colo
jQuery实现星星评分样式
效果图如下: 原理:当鼠标经过或点击时改变对应位置的图片想要实现这个插件首先需要了解jQuery的三个事件:mouseover(鼠标经过)、mouseout(鼠标离开)、click(鼠标点击)。 了解了这三个事件剩下的就是对他们进行监听,然后进行相应的逻辑处理就行了。 先贴出css样式和页面的主要代码: *{margin:0;padding:0;list-style-t
jquery实现图片样式的滚动条
利用jquery实现自选图片样式的滚动条 包含所需要的js和示例代码
jQuery实现页面滚动切换
类似于:www.mingdao.com首页的滚动切换,鼠标滚轮上下滑动的时候,页面显示切换效果
JQuery实现自动切换+手动切换
在浏览各网站的时候,经常看到某些网站中,都会一些自动+手动切换内容的效果,或者是焦点图式,或者是选项卡式。 今天就给简单的谢了一个用jQuery实现图片自动+手动切换的例子。HTML代码: JQuery实现自动切换+手动切换 JQuery实现自动切换+手动切换
jQuery实现切换式轮播图
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;banner&lt;/title&gt; &lt;script src="jquery-3.4.1.js"&gt;&lt;/script&gt; &lt;style&gt; .banner{ display:inline-block; } .banner...
Jquery实现自定义复选框样式
checkbox应该是一个比较常用的html功能了,不过浏览器自带的checkbox往往样式不怎么好看,而且不同浏览器效果也不一样。出于美化和统一视觉效果的需求,checkbox的自定义就被提出来了。这里对实现方法做个总结<!-- more --> 纯css实现的主要手段是利用label标签的模拟功能。label的for属性可以关联一个具体的input元素,即使这个input本身
Jquery实现的切换城市源码
一个非常流行的ajax框架中的Jquery实现的切换城市源码,只要将其中的超链接改动成你的连接就可以用了
jquery实现导航栏切换
<div class="menu-1-right" id="menu-1-right"> <div class="menu-1-right-li"> <a href="#" id="sy">首页</a> </div> <div class="menu-1-right-li item-current"> <a href="#"
jQuery实现栏目切换
如图要实现不同栏目的切换,点击某个标题就切换对应的栏目块,这里我们利用jQuery来实现 我们的总体的思路是实现板块的隐藏和显示,点击相应的板块,就将对应的板块显示出来,点击另外一个就隐藏,那么这里我们每一个模块都有显示框,如何实现点击时事,就找到对应的时事的模块,是我们需要解决的问题。 比如我们点击时事的时候,通过时事的id来获取到时事对应的模块,那么这里我们可以设置时事的标题和模块的id相同
jquery实现相册随机切换
随机切换相册             *{margin:0px; padding:0px;} .box{width:500px; height:400px; box-shadow:4px 4px 4px #999; margin:100px auto; position:relative; overflow:hidden;} .box img{positio
jquery实现扑克牌切换效果
  &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt;     &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt;     &amp;lt;title&amp;gt;切换效果&amp;lt;/title&amp;gt;     &amp;lt;script src=&quot;https://code.jquery.com/jquery-3.1.1.min.js&quot;&amp;gt;&amp;lt;/sc
Jquery实现的大小图切换
Jquery实现的大小图切换,css样式,以及图片
jquery实现选项卡切换
jquery 利用 index() 查找下标实现选项卡切换
jquery实现tab页切换
关联设置       &amp;lt;h2 class=&quot;h2_ch&quot;&amp;gt;&amp;lt;span id=&quot;tabs&quot; class=&quot;l&quot;&amp;gt;        &amp;lt;a href=&quot;javascript:void(0);&quot; ref=&quot;#tab_1&quot; title=&quot;基本信息&quot; class=&quot;here&quot;&amp;gt;基本信息&amp;lt;
jQuery实现tab栏切换
涉及到的知识点包括 为选择的元素增加序号、过滤选择器、排他思想、动态增加样式等。 代码如下: &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;tab栏切换&amp;lt;/title&amp;gt; &amp;lt;style type=&quot;text/
jquery实现开关切换
描述:开关是同一个事物控制两种不同的状态,开关是唯一的,但是内容是改变的 例如:开和关的切换,本来为开的状态,点击切换为关的状态,开关随意切换。具体实现如下 定义一个开关onOff=1,当第一次点击时,判断当前状态,重新赋值,每次取相反值即可。 var onOff=1; $(&quot;button&quot;).on('click',function(){ if(onOff==1){ ...
JS封装方法实现菜单栏切换
HTMl部分 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script src="tools.js"&gt;&lt;/script&gt; &lt;style&g...
利用jquery实现的网页背景切换
能实现背景渐变,效果与lofter相同,能调整切换时间和速度效果
JQuery实现图片滑动、切换
jquery实现图片滑动、图片切换的效果 支持移动端、WEB端滑动
jQuery实现点击切换验证码
页面将验证码响应到前台  &amp;lt;img class=&quot;yzm_img&quot; alt=&quot;加载失败&quot; id='imgVcode' src=&quot;&amp;lt;s:url value=&quot;/user/getImageCode&quot;/&amp;gt;&quot; /&amp;gt; &amp;lt;a href=&quot;#&quot; id=&quot;changeImg&quot;&amp;gt;看不清楚?换个图片&amp;lt;/a&
jquery实现切换皮肤
  这是帮其他组实现的一个小功能,这边记录一下给做同样功能的一个参考好了。   代码地址:https://github.com/liwei26/jquery-change-skin   目前大多数jquery实现换肤思路都是将所有样式文件引入,然后切换样式文件显隐来实现样式的切换,我觉得把所有样式文件都引入不太好,所以做了些改动。大体思路是通过切换皮肤的id来加载对应样式文件。   首先我们需要的...
jquery实现切换tab
html页面 &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=GBK&quot;&amp;gt; &amp;lt;script type=&quot;text/javascript&quot; src=&quot;jquery.min.js&quot;&amp;gt;&
jQuery实现tab选项卡切换
文章目录项目效果 项目 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;07-tab选项卡&lt;/title&gt; &lt;style&gt; *{ margin: 0; ...
顶层菜单栏没有ID值,怎么实现双语切换?
RT
【单击对话框上一按钮怎么实现菜单栏的切换显示?】
我有2个菜单栏,菜单栏切换的响应函数在主函数中,rn怎么通过视图类中的一个响应函数实现2个不同菜单栏的切换?
jquery实现统计图,可以实现各种样式的图标
利用jquery的统计图插件hightcharts结合ajax实现了三个统计图,分别用到了ajaxpro和异步两种方式是实现数据绑定
select实现div图层切换效果(jquery实现)
select实现div图层切换效果,使用jquery简单易懂、方便修改