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

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

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');
  });
});
u013455818
TPORL丶 回复weixin_38576043: 看新的回复
接近 3 年之前 回复
weixin_38576043
weixin_38576043 回复TPORL丶: 因为要是移除的话,感觉没法把兄弟元素一块移除了,还得每个每个class写,不通用
接近 3 年之前 回复
weixin_38576043
weixin_38576043 回复TPORL丶: 大神可以简单写一下么。。不太懂
接近 3 年之前 回复
u013455818
TPORL丶 回复weixin_38576043: .menu-item-1.active 这样每个设置background-image 或者 给每个li标签一个data-*属性存储图片的地址 用jq的data()获取 再用css()设置
接近 3 年之前 回复
u013455818
TPORL丶 回复weixin_38576043: 可以 给每个li一个单独的class .menu-item-1
接近 3 年之前 回复
weixin_38576043
weixin_38576043 这个是改变背景色可以,我的每一个li的背景图片都不同,点击激活背景图片,兄弟元素背景图片不激活,这样怎么弄?
接近 3 年之前 回复
 <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>

weixin_38576043
weixin_38576043 这个不是吧。。
接近 3 年之前 回复

改写id的样式表就可以啊

weixin_38576043
weixin_38576043 请问具体怎么改
接近 3 年之前 回复

方法一:

<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>
weixin_38576043
weixin_38576043 第一种方法在点击之后,所有Li背景图片只能变成.menu-item.active 类里面的一张图片,不能把每一张背景图都变吧
接近 3 年之前 回复

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

<!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







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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问