標籤沒有更新

我的網頁上有一個選項卡式佈局，每個標籤都有不同的內容。我有選項卡的funcionality工作，你可以點擊不同的選項卡，它會改變。我的第一個標籤上顯示的內容是「標籤活動」，並顯示了內容。但是，如果我點擊另一個標籤並返回到第一個標籤，則內容不會顯示。這是因爲它不在服務器上或者我的代碼出現問題嗎？另外，當我添加內容到其他選項卡divs並刷新頁面，然後單擊該選項卡上沒有顯示他們的內容，只有第一個選項卡。由於標籤沒有更新

<!DOCTYPE html> 
<html> 
<head> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
    <link rel="stylesheet" type="text/css" href="./common/res.css"/> 
    <meta charset="utf-8"> 
    <title>Room Reservation</title> 
</head> 
<header> 
    <script type="text/javascript" src="./common/tab.js"></script> 
</header> 
<body> 
    <div class="tabs"> 
     <ul class="tab-links"> 
      <li class="active"><a href="#tab1">Stage</a></li> 
      <li><a href="#tab2">Studio</a></li> 
      <li><a href="#tab3">Session</a></li> 
     </ul> 

<div class="tab-content"> 
    <div id="tab1" class="tab active"> 
     <form required> 
      Room Selection:<br> 
      <select name="room"> 
       <option value="stage">Stage Access</option> 
       <option value="grip">Grip Closet</option> 
       <option value="grid">Grid</option> 
      </select> <br><br> 
     </form> 
    <p style="color:red;">In order to gain access to the stage you must pick up the access key from the Rental House.</p><br> 
    <textarea readonly id="policy" rows="8" cols="30" placeholder="Policy Summary will go here" ></textarea><br><br> 
    <input required type="radio" id="agree">I agree I have read and understand the policy stated above and have read the full liabilty form.<br><br> 
    <div id="cal"> 
     <iframe src="https://calendar.google.com/calendar/embed?showPrint=0&amp;showTabs=0&amp;mode=WEEK&amp;height=600&amp;wkst=1&amp;bgcolor=%23FFFFFF&amp;ctz=America%2FNew_York" style="border-width:0" width="800" height="600" frameborder="0" scrolling="no"></iframe> 
    </div><br> 
    <form target="_blank" action="https://mediaservices.champlain.edu/webcheckout/pir/login"> 
     <input type="submit" value="Confirm"> 
    </form> 
    </div> 
    <div id="tab2" class="tab"> 
     <form required> 
      Room Selection:<br> 
      <select name="studioroom"> 
       <option value="control">Control Room A</option> 
       <option value="isob">Isolation Room B</option> 
       <option value="isoc">Isolation Room C</option> 
      </select> <br><br> 
     </form> 
    </div> 

    <div id="tab3" class="tab"> 
    </div> 
</div> 
</div> 
<script> 
jQuery(document).ready(function() { 
    jQuery('.tabs .tab-links li').on('click', function(e) { 
    tabs(jQuery(this).attr('data-toggle')); 
    jQuery(this).addClass('active').siblings().removeClass('active'); 
    }); 

    function tabs(tab) { 
     jQuery('.tab-content .tab').hide() 
     jQuery('.tab-content').find(tab).show(); 
    } 
}); 
</script> 
</body> 
</html> 


/*----- Tabs -----*/ 
.tabs { 
width:100%; 
display:inline-block; 
} 

/*----- Tab Links -----*/ 
/* Clearfix */ 
.tab-links:after { 
    display:block; 
    clear:both; 
    content:''; 
} 

.tab-links li { 
    margin:0px 5px; 
    float:left; 
    list-style:none; 
} 

    .tab-links a { 
     padding:9px 15px; 
     display:inline-block; 
     border-radius:3px 3px 0px 0px; 
     background:#7FB5DA; 
     font-size:16px; 
     font-weight:600; 
     color:#4c4c4c; 
     transition:all linear 0.15s; 
    } 

    .tab-links a:hover { 
     background:#a7cce5; 
     text-decoration:none; 
    } 

li.active a, li.active a:hover { 
    background:#fff; 
    color:#4c4c4c; 
} 

/*----- Content of Tabs -----*/ 
.tab-content { 
    padding:15px; 
    border-radius:3px; 
    box-shadow:-1px 1px 1px rgba(0,0,0,0.15); 
    background:#fff; 
} 

    .tab { 
     display:none; 
    } 

    .tab.active { 
     display:block; 
    }

來源

2016-03-01 R_Chin

第一：你沒有關閉＃DIV TAB1只是 – silviagreen

編輯，並添加它，仍然沒有 –

這裏是你的問題：

jQuery(this).attr('data-toggle')

您點擊李（也就是this），並嘗試獲取數據切換屬性，即不存在。

您必須檢索包含到單擊的li中的a的href屬性。

解決方案：

jQuery(this).find("a").attr('href')

工作jsfiddle

來源

2016-03-01 15:04:51 silviagreen

取而代之。非常感謝你 –

標籤沒有更新

回答

相關問題