点击.btn隐藏对应value属性的.tab失败，求修复（不使用索引过滤）

你的jQuery代码无法正常运行的核心原因是匹配字符串不一致：.btn的父元素id是tab01、tab02这类不带#的字符串，但.tab元素的value属性值是#tab01、#tab02这类带#的字符串，两者无法匹配，导致过滤不到目标元素，自然无法执行隐藏操作。

下面提供两种修复方式，任选其一即可：

方式一：修改JavaScript代码（推荐） #

给获取到的父元素id加上#前缀，让它和.tab的value值格式统一：

$(".btn").click(function() {
  var tabname = "#" + $(this).parent().attr("id")

  $(".tab").filter(function() {
    return $(this).attr("value") === tabname
  }).hide()
})

也可以简化写法，直接用属性选择器代替filter：

$(".btn").click(function() {
  var tabname = "#" + $(this).parent().attr("id")
  $(".tab[value='" + tabname + "']").hide()
})

方式二：修改HTML代码 #

调整.tab元素的value属性，去掉#前缀，让它和父元素id保持一致：

<div class="tab-list">
  <button class="tab" value="tab01">This is button 1</button>
  <button class="tab" value="tab02">This is button 2</button>
  <button class="tab" value="tab03">This is button 3</button>
</div>

内容的提问来源于stack exchange，提问作者Keith paul