tabbboxでの使用のためにattr（href）を取得する

Question

こんにちは私はタブ付きのボックスを作成していますが、デッドエンドになってしまいました。そのユーザーはnavigattionメニューtabbでそのIDをフェードインし、 .MYコードは、何らかの形で私はそれがそのIDでクリックされた要素のid ID、フェードインのdiv要素のhref属性をretrive、最初の子以外のすべてをフェードアウトbasicly、動作しますホッピングして、このように書きます... HTML：

<section id="tabBox"> 
      <nav id="tabBoxNav"> 
       <ul> 
        <li><a href="#tabBoxHTML" data-list="1">Preporuka</a></li> 
        <li><a href="#tabBoxCSS" data-list="2">Otkrivamo</a></li> 
        <li><a href="#tabBoxJQuery" data-list="3">Izdvajamo</a></li> 
        <!--<li><a href="#tabBoxPHP">PHP</a></li> 
        <li><a href="#tabBoxWP">WordPress</a></li>--> 
        <div class="clearfix"></div> 
       </ul> 
      </nav> 
      <section id="tabBoxContent"> 
       <div class="tabBoxContainer" id="tabBoxHTML" data-list="1"> 
        <div class="tabBoxArticle"> 
         <img src="img/juneca-rebra.jpg" alt=""> 
         <h1><a href="#">Lorem ipsum dolor sit amet</a></h1> 
        </div> 
        <div class="tabBoxArticle"> 
         <img src="img/jaja-sa-sunkom.jpg" alt=""> 
         <h1><a href="#">Lorem ipsum dolor sit amet</a></h1> 
        </div> 
        <div class="tabBoxArticle"> 
         <img src="img/keciga.jpg" alt=""> 
         <h1><a href="#">Lorem ipsum dolor sit amet</a></h1> 
        </div> 
       </div><!-- /#tabBoxContainer --> 
       <div class="tabBoxContainer" id="tabBoxCSS" data-list="2"> 
        <div class="tabBoxArticle"> 
         <img src="img/piletina-na-mlimarski-nacin.jpg" alt=""> 
         <h1><a href="#">Somme dummy long article title</a></h1> 
        </div> 
        <div class="tabBoxArticle"> 
         <img src="img/pohovana-paprika.jpg" alt=""> 
         <h1>Somme dummy long article title</h1> 
        </div> 
        <div class="tabBoxArticle"> 
         <img src="img/pohovani-sir.jpg" alt=""> 
         <h1>Somme dummy long article title</h1> 
        </div> 
       </div><!-- /#tabBoxContainer --> 
       <div class="tabBoxContainer" id="tabBoxJQuery" data-list="3"> 
        <div class="tabBoxArticle"> 
         <img src="img/rriblji-paprikas.jpg" alt=""> 
         <h1>Dummy long article title</h1> 
        </div> 
        <div class="tabBoxArticle"> 
         <img src="img/sat1.jpg" alt=""> 
         <h1>Dummy long article title</h1> 
        </div> 
        <div class="tabBoxArticle"> 
         <img src="img/satova-zakuska.jpg" alt=""> 
         <h1>Dummy long article title</h1> 
        </div> 
       </div><!-- /#tabBoxContainer --> 

      </section><!-- /#tabBoxContent --> 
     </section><!-- /#tabBox --> 

CSS：

#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; 
     } 

のjQuery：

01それは、私が使用したいくつかの古いtechnikeに基づいていますの

$(".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(); 

    }); 

...

Answer 1

いくつかの変更は、（すべての変更は、スクリプトの下に記録されます）スクリプトに行わなければなりませんでした。

まとめて、それがダウンしています：

1. いくつかの構文エラー、jQueryのメソッドの
2. と
適用できない用途、例えば方法は、（代わりにオブジェクトの変数の文字列値に を連鎖されています 音符.fadeIn()方法に対して行わ 調整）

コードスニペットデモンストレーション：

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

 
/** 
 
Change Log: 
 
    1. Error: "Uncaught ReferenceError: $ is not defined" 
 
    - jQuery library included (for the sake of demonstration) 
 
    2. Error: "Uncaught ReferenceError: a is not defined" 
 
    - event delegation removed from .on() event handler, 
 
    - undefined variable "a", in `.on('click', a, function(event) {...});` removed, 
 
    - anchor elements (<a>) already specified with initial selector range `$("#tabBoxNav ul li a")` 
 
    3. Error: "Uncaught TypeError: this.attr is not a function" 
 
    - missing `$` at line 6 inserted 
 
    4. Error: "Uncaught TypeError: abc.fadeIn is not a function" 
 
    - .fadeIn() method chained to object (e.g: $("#tabBoxCSS").fadeIn()) instead of the string value of variable `abc` (e.g: "#tabBoxCSS".fadeIn()) 
 
**/

/* 
 
|| Note: some styles have been commented out for the sake of demonstration 
 
*/ 
 

 
#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; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section id="tabBox"> 
 
    <nav id="tabBoxNav"> 
 
    <ul> 
 
     <li><a href="#tabBoxHTML" data-list="1">Preporuka</a></li> 
 
     <li><a href="#tabBoxCSS" data-list="2">Otkrivamo</a></li> 
 
     <li><a href="#tabBoxJQuery" data-list="3">Izdvajamo</a></li> 
 
     <!--<li><a href="#tabBoxPHP">PHP</a></li> 
 
        <li><a href="#tabBoxWP">WordPress</a></li>--> 
 
     <div class="clearfix"></div> 
 
    </ul> 
 
    </nav> 
 
    <section id="tabBoxContent"> 
 
    <div class="tabBoxContainer" id="tabBoxHTML" data-list="1"> 
 
     <div class="tabBoxArticle"> 
 
     <img src="img/juneca-rebra.jpg" alt=""> 
 
     <h1><a href="#">Lorem ipsum dolor sit amet</a></h1> 
 
     </div> 
 
     <div class="tabBoxArticle"> 
 
     <img src="img/jaja-sa-sunkom.jpg" alt=""> 
 
     <h1><a href="#">Lorem ipsum dolor sit amet</a></h1> 
 
     </div> 
 
     <div class="tabBoxArticle"> 
 
     <img src="img/keciga.jpg" alt=""> 
 
     <h1><a href="#">Lorem ipsum dolor sit amet</a></h1> 
 
     </div> 
 
    </div> 
 
    <!-- /#tabBoxContainer --> 
 
    <div class="tabBoxContainer" id="tabBoxCSS" data-list="2"> 
 
     <div class="tabBoxArticle"> 
 
     <img src="img/piletina-na-mlimarski-nacin.jpg" alt=""> 
 
     <h1><a href="#">Somme dummy long article title</a></h1> 
 
     </div> 
 
     <div class="tabBoxArticle"> 
 
     <img src="img/pohovana-paprika.jpg" alt=""> 
 
     <h1>Somme dummy long article title</h1> 
 
     </div> 
 
     <div class="tabBoxArticle"> 
 
     <img src="img/pohovani-sir.jpg" alt=""> 
 
     <h1>Somme dummy long article title</h1> 
 
     </div> 
 
    </div> 
 
    <!-- /#tabBoxContainer --> 
 
    <div class="tabBoxContainer" id="tabBoxJQuery" data-list="3"> 
 
     <div class="tabBoxArticle"> 
 
     <img src="img/rriblji-paprikas.jpg" alt=""> 
 
     <h1>Dummy long article title</h1> 
 
     </div> 
 
     <div class="tabBoxArticle"> 
 
     <img src="img/sat1.jpg" alt=""> 
 
     <h1>Dummy long article title</h1> 
 
     </div> 
 
     <div class="tabBoxArticle"> 
 
     <img src="img/satova-zakuska.jpg" alt=""> 
 
     <h1>Dummy long article title</h1> 
 
     </div> 
 
    </div> 
 
    <!-- /#tabBoxContainer --> 
 

 
    </section> 
 
    <!-- /#tabBoxContent --> 
 
</section> 
 
<!-- /#tabBox -->