0

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

我有三个标签，它们只是从字面上淡入​​并隐藏其他标签内容。很基础。

只是不知道如何阻止将页面发送到顶部的链接，这不是一个大问题，但很烦人。

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