2013-08-30 55 views
0

我已經使用JQuery UI選項卡和我的選項卡工作正常。請參閱下面的代碼。爲什麼鏈接內部標籤不起作用?

<ul class="tabs"> 
    <li><a href="#tab1">Login</a></li> 
    <li><a href="#tab2">Register User</a></li> 
    <li><a href="#tab3">Forgot Password </a></li> 


</ul> 
<div class="tab_container"> 
    <div id="tab1" class="tab_content clearfix"> 
     <h2>Login</h2> 
     <div class="login-form"> 
       <div class="username-bg"><input name="a" type="text" value="username" /><img src="images/user-icon.png" alt="" /></div> 
       <div class="password-bg"><input name="a" type="password" value="password" /><img src="images/password-icon.png" alt="" /></div> 
       <a href="#tab3" class="login-text">Lost Your Password ?</a> 
       <a href="preprints.html" class="signup"></a>    
     </div> 
    </div> 
    <div id="tab2" class="tab_content "> 
     <h2>Register User</h2> 
     <div class="login-form"> 
       <div class="username-bg " ><input name="a" type="text" value="username" required /><img src="images/user-icon.png" alt="" /></div> 
       <div class="password-bg"><input name="a" type="password" value="password" /><img src="images/password-icon.png" alt="" /></div>    
       <a href="#tab3" class="login-text">Lost Your Password ?</a> 
       <a href="preprints.html" class="save"></a>   
     </div> 
    </div> 
    <div id="tab3" class="tab_content"> 
     <h2>Forgot Password</h2> 
     <div class="login-form"> 
       <div class="username-bg"><input name="a" type="text" value="new password" /><img src="images/password-icon.png" alt="" /></div> 
       <div class="password-bg"><input name="a" type="text" value="confirm password" /><img src="images/password-icon.png" alt="" /></div> 
       <a href="#tab3" class="login-text">Lost Your Password ?</a> 
       <a href="preprints.html" class="save"></a>   
     </div> 


    </div> 

</div> 

jQuery的,我用低於

<script type="text/javascript"> 

$(document).ready(function() { 

    //Default Action 
    $(".tab_content").hide(); //Hide all content 
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab 
    $(".tab_content:first").show(); //Show first tab content 

    //On Click Event 
    $("ul.tabs li").click(function() { 
     $("ul.tabs li").removeClass("active"); //Remove any "active" class 
     $(this).addClass("active"); //Add "active" class to selected tab 
     $(".tab_content").hide(); //Hide all tab content 
     var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content 
     $(activeTab).fadeIn(); //Fade in the active content 
     return false; 
    }); 

}); 
</script> 

現在我想的標籤Lost Your Password ?裏面的鏈接,鏈接到TAB3被忘記密碼選項卡,但它不是沃金,請幫助。由於

+1

我看到的只是HTML,沒有jQuery的 –

+0

ü可以創建一個的jsfiddle? – iJade

+0

我更新了js – user1900662

回答

0

給標籤內的鏈接的新類(如class="linktab")和數據屬性(如data-tab="3"),並使用類似

$('a.linktab').click(function() { 
    $('.tabs').tabs('option', 'active', $(this).data('tab')); 
    return false; 
}); 
+0

你的數據屬性是什麼意思? – user1900662

+0

將您的''更改爲''。有了這個,你可以在鏈接中存儲鏈接打開哪個標籤的信息。 – Raidri

+0

它沒有鍛鍊老闆。該網址正在追加#tab3。對於其他選項卡,網址未更新,但打開了選項卡。 – user1900662

相關問題