0

簡単なものです。

文字通りフェードインして他のタブコンテンツを非表示にする3つのタブがあります。非常に基本的です。

リンクがページをトップに送信するのを止める方法を理解することはできません。大きな問題ではありませんが、迷惑です。

これが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>

どんなアドバイスも素晴らしいでしょう

4

2 に答える 2

1

作業デモ

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-11T10:50:56.287 に答える
0

次のようにコードを短縮できます。

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>

js

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-11T10:55:43.607 に答える