Question

只是一个快速的，这是令人沮丧的！

我有三个标签，只是淡入淡出并隐藏其他标签内容。非常基本的。

只是无法弄清楚如何阻止将页面发送到顶部的链接，不是一个大问题而是烦人的。

这里有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>

任何建议都很棒

Answer 1

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;
    });
});

Answer 2

你可以缩短你的代码，如：

<强> 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

jQuery选项卡返回false;

2 个答案: