重新隐藏当一个新的选择时

虽然下面的代码的伟大工程动态切换我的div内容的动态格的内容，现在的问题是，javascript代码不会隐藏用户的先前的选择。关于如何修改代码以动态切换div内容并隐藏用户之前所做的选择的任何想法？

下面是HTML和Javascript：

<!DOCTYPE html>  
<html>  
<head>  
<script src="jquery-1.11.3.min.js"></script> 
<script type="text/javascript">  
window.onload = function() {  
    $("li").click(function(){    
      var $li = $(this);    
      var selector = $li.data("show"); // => "#item1"      
      $(selector).removeClass("hidden"); //but show matching item    
    });  
} 
</script>  

<style type="text/css">  
#container { 
    bottom: 0; left: 0; top: 0; right: 0; 
    margin: auto; 
    position: absolute; 
    width: 900px; 
    height: 600px; 
} 
#list { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
} 
#list li { 
    margin:0 0 10px 0; 
    background: grey; 
    padding: 3px; 
    cursor: pointer; 
} 
.item { 
    width: 100%; 
    height: 100%; 
    background: rgb(192,192,192);  
} 
#menu { 
    float: left; 
    width: 25%; 
    background-color: #ff99CC; 
    height: 100%; 
} 
#content { 
    float: left; 
    width: 75%; 
    background-color: rgb(192,192,192); 
    height: 100%; 
} 
.hidden{ display:none; } 
</style> 

</head>  
<body>  
    <div id="container">   
     <div id="menu">   
      <ul id="list"> 
       <li data-show="#item1">Coffee</li> 
       <li data-show="#item2">Tea</li> 
       <li data-show="#item3">Ice Cream</li> 
      </ul>   
     </div>   
     <div id="content">   
     <div id="item1" class="hidden item">Something about coffee...</div>   
     <div id="item2" class="hidden item">Things about tea...</div>   
     <div id="item3" class="hidden item">Things about ice cream...</div> 
     </div>   
    </div> 
</body>  
</html>

来源

2015-10-20 BobbyJones

所以要删除该类隐藏，但它不是删除？ –

只需保留对当前选定项目的引用。 – MasterAM

使用本：https://jsfiddle.net/mig1098/2xr1zy2b/

$("li").click(function(){ 
      var $li = $(this); 
      var selector = $li.data("show"); // => "#item1" 
      $('.item').addClass('hidden'); 
      $(selector).removeClass("hidden"); //but show matching item 
});

也可以验证使用过滤器id值https://jsfiddle.net/mig1098/2xr1zy2b/1/

$("li").click(function(){ 
    var $li = $(this); 
    var selector = $li.data("show"); // => "#item1" 
    $(selector).removeClass("hidden"); //but show matching item 
    $('.item').filter(function(){ 
     return selector.indexOf($(this).attr('id')) > -1 ? false : true; 
    }).addClass('hidden'); 
});

来源

2015-10-20 17:46:40 miglio

完美无暇的工作！我会尽我所能接受！ – BobbyJones

重新隐藏当一个新的选择时

回答

相关问题