jQuery選項卡返回false;

我有三個標籤，只是逐漸淡入和隱藏其他標籤內容。非常基本。

只是不知道如何停止發送頁面到頂部的鏈接，而不是一個大問題，但煩人。

這裏有jQuery。

 <script> 
    jQuery("#accounttab").live('click', function(){ 

     jQuery("#accounttab").css("border", "2px solid #009FE3"); 
     jQuery("#salestab").css("border", "2px solid white"); 
     jQuery("#delivertab").css("border", "2px solid white"); 

     jQuery("#tabtext1").fadeIn(200); 
     jQuery("#tabtext2").hide(); 
     jQuery("#tabtext3").hide(); 
    return false; 
    }); 

    jQuery("#salestab").live('click', function(){ 

     jQuery("#salestab").css("border", "2px solid #009FE3"); 
     jQuery("#accounttab").css("border", "2px solid white"); 
     jQuery("#delivertab").css("border", "2px solid white"); 

     jQuery("#tabtext1").hide(); 
     jQuery("#tabtext2").fadeIn(200); 
     jQuery("#tabtext3").hide(); 

    return false; 
    }); 

    jQuery("#delivertab").live('click', function(){ 

     jQuery("#delivertab").css("border", "2px solid #009FE3"); 
     jQuery("#accounttab").css("border", "2px solid white"); 
     jQuery("#salestab").css("border", "2px solid white"); 

     jQuery("#tabtext1").hide(); 
     jQuery("#tabtext2").hide(); 
     jQuery("#tabtext3").fadeIn(200); 

    return false; 
    }); 


</script>

任何意見將是真棒

來源

2012-10-11 oneumbre

'.live（）'已棄用，有[tabs插件]（http://jqueryui.com/tabs/），你所有的處理程序基本上都是做同樣的事情，所以它們可以合併，你需要當你點擊鏈接時，'preventDefault'，'$'是'jQuery'的簡寫... – nbrooks

你可以縮短你的代碼，如：

HTML

<a id="accounttab" class='actab' href="#">Test1</a> 
<a id="salestab" class='sltab' href="#">Test2</a> 
<a id="delivertab" class='dtab' href="#">Test3</a> 

<br /><br/> 
<div id="tabtext1" class='actab'>Div test 1</div> 
<div id="tabtext2" class='sltab'>Div test 2</div> 
<div id="tabtext3" class='dtab'>Div test 3</div>

var tabsArr = ['#accounttab', '#salestab', '#delivertab']; 
var joined = tabsArr.join(", "); 

$(joined).live("click", function(e) { 
    e.preventDefault(); 
    var selectedClass = $(this).attr("class"); 
    $("div[class!='"+selectedClass+"']").css("border", "2px solid white").hide(); 
    $("div[class='"+selectedClass+"']").css("border", "2px solid #009FE3").fadeIn(200);  
});

演示：jsFiddle

來源

2012-10-11 10:55:43

Working Demo

HTML

<div id='parent'> 
<a href='#' id='acounttab' class='tablink'> Account </a> 
<a href='#' id='salestab' class='tablink'>Sales </a> 
<a href='#' id='delivertab' class='tablink'>Deliver </a> 
</div> 
<div id='tabtext1'>Account - Here you go!</div> 
<div id='tabtext2'>Sales - Here you go!</div> 
<div id='tabtext3'>Deliver - Here you go!</div>

CSS

div[id^="tabtext"] { display:none; }

的Javascript

$(function() { 
    $('#parent').on('click', 'a.tablink', function(e) { 
     e.preventDefault(); 

     $(this).css("border", "2px solid #009FE3"); 
     $('a.tablink').not(this).css("border", "2px solid white"); 

     var i = $(this).index('a.tablink'); 
     var tab = $('#tabtext'+(i+1)).fadeIn(200); 
     $('div[id^="tabtext"]').not(tab).hide(); 

     return false; 
    }); 
});

來源

2012-10-11 10:50:56 nbrooks

使用['.on']（http://api.jquery.com/on/）需要至少jQuery 1.7 ，但如有必要，還有其他選擇 – nbrooks

jQuery選項卡返回false;

回答

相關問題