Javascript 检索attr（href）以在tabbbox中使用

大家好，我正在创建选项卡框，但却走到了死胡同。我想知道的是，用户单击导航菜单选项卡中的某个id会淡入，而其他所有id都会淡出。我的代码是这样的，不知怎的，我在跳它会工作，基本上会淡出，除了第一个孩子，检索id为的单击元素的href属性，有那个id的fadeIn div。。。 HTML:

jQuery：

   $(".tabBoxContainer").addClass("fixedTabContent");
  $(".tabBoxContainer").fadeOut();
  $(".tabBoxContainer:first-child").fadeIn();
  $("#tabBoxNav ul li a").on('click', a,  function(event){
    event.preventDefault();
    var abc = (this).attr("href");
    console.log(abc);
    $(".tabBoxContainer").fadeOut();
    abc.fadeIn();

  });

---

它基于我使用的一些旧技术…

必须对脚本进行一些更改（所有更改都记录在脚本下面）

总之，可以归结为：

一些语法错误

以及jQuery方法的不适用用法，例如被链接的方法 将变量的值而不是对象的值串起来（注意 对

.fadeIn（）

方法所做的调整）

代码片段演示：

$（“.tabBoxContainer”）.addClass（“fixedTabContent”）；
$（“.tabBoxContainer”）.fadeOut（）；
$（“.tabBoxContainer:first child”）.fadeIn（）；
$（“#tabBoxNav ul li a”）。在（'click'，函数（事件）{
event.preventDefault（）；
var abc=$（this.attr（“href”）；
控制台日志（abc）；
$（“.tabBoxContainer”）.fadeOut（）；
$（abc.fadeIn（）；
});
/** 
更改日志：
1.错误：“未捕获引用错误：$未定义”
-包含jQuery库（为了演示）
2.错误：“未捕获引用错误：未定义”
-已从.on（）事件处理程序中删除事件委派，
-未定义的变量“a”，在“.on（'click'，a，function（event）{…}）”中，`远离的，
-锚元素(



Somme虚拟长文章标题
Somme虚拟长文章标题
虚拟长文章标题
虚拟长文章标题
虚拟长文章标题

#tabBox {
    position: relative;
    top: -200px;
    width: 80%;
    margin: 0 auto;
    background: #fff !important;
    z-index: 2;
}
    #tabBoxNav {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
    }
    #tabBoxNav ul {
        list-style: none;
        width: 80%;
        margin: auto;
    }
    #tabBoxNav ul li {
        float: left;
    }
    #tabBoxNav ul li a {
        display: block;
        box-sizing: border-box;
        padding: 5px;
        text-align: center;
        font-weight: 600;
        font-size: 1.2em;
        color: #fff;
    }
    #tabBoxNav ul li a:hover {
        color: #ff8a1a;
    }

    #tabBoxContent {
      position: relative;
      top: 50px;
      background: #fff;
    }
    .tabBoxContainer {
      position: relative;
      float: left;
      color: #232323;
    }
    .fixedTabContent {
      position: absolute !important;
      top: 0px !important;
      left: 0 !important;
    }
        .tabBoxArticle {
            float: left;
            width: 33%;
            box-sizing: border-box;
            padding: 10px;
        }
        .tabBoxArticle img {
          width: 90%;
        }
        .tabBoxArticle h1 a {
          color: #222 !important;
        }

   $(".tabBoxContainer").addClass("fixedTabContent");
  $(".tabBoxContainer").fadeOut();
  $(".tabBoxContainer:first-child").fadeIn();
  $("#tabBoxNav ul li a").on('click', a,  function(event){
    event.preventDefault();
    var abc = (this).attr("href");
    console.log(abc);
    $(".tabBoxContainer").fadeOut();
    abc.fadeIn();

  });