Question

我正在学习jQuery，无法理解为什么这段代码不起作用。我想要发生的是当点击（.tabs＆gt; a）时，＃title和#content divs应该分别显示.tabtitle和.tabcontent中他们（.tabs＆gt; 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

Answer 1

您可能打算使用find()，因为.tabtitle和.tabcontent是所点击锚点的子项：

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

FIDDLE

jQuery DOM遍历问题

1 个答案: