JQuery实现菜单栏样式切换怎么实现？

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

<!DOCTYPE html>

tab标签

Three

Four

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

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');
  });
});

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

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

改写id的样式表就可以啊

方法一：

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

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