检索attr（href）以便在tabbox中使用

问题描述 投票：0回答：1

大家好我正在创建标签框但是走到了尽头。我想知道的是，用户点击导航菜单标签中的某些内容，其中所有其他内容都消失了。我的代码就像这样，不知怎的，我正在跳过它将工作，基本淡出除了第一个孩子，点击一个id id，fadeIn div与该id的元素的retrive href属性... 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的：

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

  });

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

javascript jquery html css
1个回答
1
投票

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

在摘要中，它归结为：

  1. 一些语法错误，
  2. 并且不适用于jQuery方法，例如将方法链接到变量的字符串值而不是对象（请注意对.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 -->
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.