無法使用製表符在HTML和JavaScript中工作

我不是一個JavaScript人，所以我在試圖做什麼時遇到了一些困難。我們有一個html頁面，用於顯示我們產品的3個不同細節的「選項卡」：描述，細節和退貨。我可以讓選項卡正確顯示，但是當我點擊選項卡標題時，JavaScript不會更改爲選項卡。無法使用製表符在HTML和JavaScript中工作

enter image description here

這裏是我的html，很基本的：

<html> 
<head> 
    <link rel="stylesheet" href="skeleton.css"> 
    <link rel="stylesheet" href="layout.css"> 
    <link rel="stylesheet" href="base.css"> 
    <link rel="stylesheet" href="styles.css"> 
</head> 
<body> 
    <br><br><br> 
    <ul class="sans tabs"> 
     <li> 
      <a class="active" href="#tabinfo" style="fonrt-weight:normal">Description</a> 
     </li> 
     <li> 
      <a href="#tabdetails" style="fonrt-weight:normal;color:#999">Details</a> 
     </li> 
     <li> 
      <a href="#returns" style="fonrt-weight:normal;color:#999">Delivery & Returns</a> 
     </li> 
    </ul> 
    <ul class="tabs-content"> 
     <li class="active" id="tabinfo"> 
      <p>A description of the product would go here. A description of the product would go here. A description of the product would go here. 
      A description of the product would go here. A description of the product would go here. A description of the product would go here. A description of the product would go here.</p> 
     </li> 
     <li id="tabdetails"> 
      <ul> 
       <li>Detail #1</li> 
       <li>Detail #2</li> 
       <li>Detail #3</li> 
       <li>Detail #4</li> 
       <li>Detail #5</li> 
       <li>etc.</li> 
      </ul> 
     </li> 
     <li id="returns"> 
      <p>Details about returning a product would go here.</p> 
      <p>Details about returning a product would go here.</p> 
      <p>See <a href="/somelink/">Delivery & Returns</a> for more information.</p> 
     </li> 
    </ul> 
    <script src="tabs.js"></script> 
</body> 
</html>

，當然，在tabs.js文件：

$('body').on('click', 'ul.tabs > li > a', function(e) { 

    //Get Location of tab's content 
    var contentLocation = $(this).attr('href'); 

    //Let go if not a hashed one 
    if(contentLocation.charAt(0)=="#") { 

     e.preventDefault(); 

     //Make Tab Active 
     $(this).parent().siblings().children('a').removeClass('active'); 
     $(this).addClass('active'); 

     //Show Tab Content & add active class 
     $(contentLocation).show().addClass('active').siblings().hide().removeClass('active'); 

    } 
});

再說一遍，我不知道一大堆關於js，所以我相信這是與該做的，但現在我卡住了，無法弄清楚。

來源

2013-04-30 Robert

你包括tabs.js whioch似乎依賴於一些jQue ry代碼，但你不包括你需要的jquery.js文件。 – 2013-04-30 11:13:05

什麼是'tabs.js'？你有鏈接嗎？ – Xotic750 2013-04-30 11:32:56

不相關的但是'fonrt-weight'不存在，它應該是你的標籤鏈接上的'font-weight' - 我假設的一個錯字:) – 2013-04-30 11:34:21

你需要用你的陳述在準備發言..即

$(document).ready(function(e) { 

    $('body').on('click', 'ul.tabs > li > a', function(e) { 

     //Get Location of tab's content 
     var contentLocation = $(this).attr('href'); 

     //Let go if not a hashed one 
     if(contentLocation.charAt(0)=="#") { 

      e.preventDefault(); 

      //Make Tab Active 
      $(this).parent().siblings().children('a').removeClass('active'); 
      $(this).addClass('active'); 

      //Show Tab Content & add active class 
      $(contentLocation).show().addClass('active').siblings().hide().removeClass('active'); 

     } 
    }); 

});

這可以neatened起來還有：

$('body').on('click', 'ul.tabs > li > a', function(e) {

可能成爲

$('.tabs').on('click', 'a', function(e) {

來源

2013-04-30 11:40:49

我不確定這是否僅僅是問題或文件本身的錯字，但是肯定會導致問題 – Xotic750 2013-04-30 11:50:56

我無法做出決定，但其餘部分看起來不錯，所以我認爲它必須是一直 – 2013-04-30 11:51:46

我無法正確渲染第一行沒有刻度線，它顯示爲純文本，所以我用這些只是爲了得到代碼來顯示....在js中，它們不包括在內。 – Robert 2013-04-30 11:52:36

試試用這個jquery ui tabs。你會發現所有你需要的代碼，並就如何在提供的鏈接應用它的解釋

來源

2013-04-30 11:12:42 Andrew

你需要的，而不是對身體

$("body ul.tabs li").click(function() { 
    // the function goes here. 
});

這是添加的標籤頭的Click處理程序，假設你正在使用jQuery。如果你還沒有使用它，你應該在頭部部分添加它。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js" />

來源

2013-04-30 11:13:04 PowerPanda

我按照您的建議進行了更改，但現在我的頁面根本無法呈現。我相信它與jquery.min.js鏈接有關，因爲如果我刪除它（僅用於測試目的），頁面將呈現。 ??? – Robert 2013-04-30 11:28:20

如果你不是通過http/s查看頁面，你需要將它添加到'src'屬性中。所以將'src =「//'改爲'src =」http：//' – 2013-04-30 11:30:48

也不是所有的瀏覽器都允許自動關閉腳本標記; 不容易出錯 – Tommi 2013-04-30 11:31:40

無法使用製表符在HTML和JavaScript中工作

回答

相關問題