0

我正在学习 jQuery，无法理解为什么这段代码不起作用。我想要发生的是，当单击 (.tabs > a) 时，#title 和 #content div 应该分别显示 .tabtitle 和 .tabcontent 中的内容，它们是 (.tabs > a ) 的子项。

这是我目前的 HMTL：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>HTML 5 Tester</title>

<link rel="stylesheet" href="css/style.css">
</head>

<body>
    <header>
    </header>
    <nav>
        <div class="tabs">
            <a href="#tab1" id="tab1" class="tab">
                Home

                <span class="tabtitle" id="tabtitle1">
                Home Title
                </span>
                <span class="tabcontent" id="tabcontent1">
                This is the home tab content
                </span>               
            </a>

            <a href="#tab2" id="tab2" class="tab">
                About

                <span class="tabtitle" id="tabtitle2">
                About Title
                </span>
                <span class="tabcontent" id="tabcontent2">
                This is the about tab content
                </span> 
            </a>
            <a href="#tab3" id="tab3" class="tab">
                Contact

                <span class="tabtitle" id="tabtitle3">
                Contact Title
                </span>
                <span class="tabcontent" id="tabcontent3">
                This is the contact tab content
                </span>  
            </a>
            <a href="#tab4" id="tab4" class="tab">
                Graphic Design

                <span class="tabtitle" id="tabtitle4">
                Graphic Design Title
                </span>
                <span class="tabcontent" id="tabcontent4">
                This is the graphic design tab content
                </span>
            </a>
            <a href="#tab5" id="tab5" class="tab">
                Photography

                <span class="tabtitle" id="tabtitle5">
                Photography Title
                </span>
                <span class="tabcontent" id="tabcontent5">
                This is the photography tab content
                </span>
            </a>
            <a href="#tab6" id="tab6" class="tab">
                Web Design

                <span class="tabtitle" id="tabtitle6">
                Web Design Title
                </span>
                <span class="tabcontent" id="tabcontent6">
                This is the web design tab content
                </span>
            </a>
        </div>
    </nav>

    <article>
      <div id="main">
        <p id="title">  </p>
        <p id="content"> </p>
      </div>



    </article>

    <aside align="right">

    </aside>

    <footer>
    <span id="cpyrt">&copy; 2013 Redloh Visions</span>
    </footer>
    <script src="scripts/jquery.min.js"></script>
    <script src="scripts/content.js"></script>
</body>
</html>

我当前的 CSS：

body {
    margin:0;
    width: 100%;
    position: fixed;
    height: 100%;
    border: none;
}
header {
    background-color: #036;
    height: 14%;
    padding: 9px;
    box-shadow: inset #000 0px -3px 150px;
}
nav{
    background-color: #666;
    box-shadow: inset #000 -50px -15px 50px;
    float:left;
    width: inherit;
    height: 59px;
}
/*----------------------------------------------------------------------------*/
/*--------------Navigation Tabs Styling ----- START --------------------------*/
/*----------------------------------------------------------------------------*/

div.tabs {
    position: relative;
    font-size: 0;
    margin-left: 10px;
}

div.tabs > a {
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
    margin-left: 10px;
    display: inline-block;
    padding: 9px;
    font-size: 16px;
    border-radius: 5px 5px 0 0;
    background-color: #222;
    color: #fff;
    text-decoration: none;
    line-height: 1em;
    width: 45px;
    text-align: center;
    box-shadow: inset  #000 0px -3px 6px;
    -webkit-transition: border-radius 0.3s  linear, color 0.5s linear, background-color 1s linear;
    -moz-transition: border-radius 0.3s  linear, color 0.5s linear, background-color 1s linear;
    -o-transition: border-radius 0.3s  linear, color 0.5s linear, background-color 1s linear;
    width: 140px;
    margin-top: 25px;
    text-shadow: #fff 0px 0px 3px;
}


div.tabs > a:target {
    font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
    color: #000;
    background-color: #08c;
    box-shadow: inset #001 0px 2px 1px;
    margin-top: -5px;
    font-size: 18px;
    padding-top:12px;
    width: 140px;
    border-radius: 16px 16px 0 0;
    height: 18px;
    -webkit-transition: border-radius 0.3s  linear, color 0.5s linear;
    -moz-transition: border-radius 0.3s  linear, color 0.5s linear;
    -o-transition: border-radius 0.3s  linear, color 0.5s linear;
        text-shadow: #000 0px 0px 3px;

}
/*----------------------------------------------------------------------------*/
/*--------------Navigation Tabs Styling ----- END ----------------------------*/
/*----------------------------------------------------------------------------*/

/*----------------------------------------------------------------------------*/
/*--------------Main Content Styling ----- START -----------------------------*/
/*----------------------------------------------------------------------------*/
#main{
    position: relative;
    float:inherit;
    width: 77%;
    height: 62%;
    background-color: #999;
    box-shadow: #001 0px 16px 50px;
    margin-top: 1%;
    margin-left: 2%;
}
#main p{
    margin:10px;    
}
#title{
    font-size:56px;
    text-shadow:#000 2px 0px 4px;   
}
#content{
    font-size: 25px;
}
.tabcontent{
    display: none;  
}
.tabtitle{
    display: none;  
}
/*----------------------------------------------------------------------------*/
/*----------------Main Content Styling ----- END -----------------------------*/
/*----------------------------------------------------------------------------*/

article{
    padding: 5px;
    float: left;
    background-color: #444;
    height: inherit;
    width: inherit;
    box-shadow: inset  #08c -150px 250px 350px;
}
aside{
    top: auto;
    padding: 10px;
    position: fixed;
    right: 0;
    background-color: #111;
    width: 17%;
    height: inherit;
    float: right;
    box-shadow: inset #333 1px -100px 15px;
}

footer {
    box-shadow: inset #000 0px -5px 50px;
    position: fixed;
    bottom: 0;
    background-color: #036;
    width: inherit;
    height:8%;
    padding-top: 5px;
}
#cpyrt{
    float: right;
    padding-right: 20px;
}

还有我当前的 jQuery：

$(document).ready(function() {

    $('.tabs a').on( "click", function(){
        var title = $closest('.tabtitle').text();
        var content = $closest('.tabcontent').text();
        $('#title').text(title);
        $('#content').text(content);
    });
});

如果我将 jquery 分成单独的函数，如下所示，这是可行的，但一直在努力学习如何少写多做，就像他们说的那样，哈哈。任何意见是极大的赞赏。

$('#tab1').on( "click", function(){
        var title = $('#tabtitle1').text();
        var content = $('#tabcontent1').text();
        $('#title').text(title);
        $('#content').text(content);
    });

    $('#tab2').on( "click", function(){
        var title = $('#tabtitle2').text();
        var content = $('#tabcontent2').text();
        $('#title').text(title);
        $('#content').text(content);
    });

    $('#tab3').on( "click", function(){
        var title = $('#tabtitle3').text();
        var content = $('#tabcontent3').text();
        $('#title').text(title);
        $('#content').text(content);
    });

...and so on
4

1 回答 1

2

您可能打算使用find(), as .tabtitleand .tabcontentare the children of the clicked anchor ：

$(document).ready(function() {

    $('.tabs a').on( "click", function(e){
        e.preventDefault();
        var title   = $(this).find('.tabtitle').text(),
            content = $(this).find('.tabcontent').text();

        $('#title').text(title);
        $('#content').text(content);
    });
});

小提琴

于 2013-05-19T21:01:42.913 回答