jquery - Jquery関数が2番目のdivで機能しない

Question

私はjQueryにかなり慣れていないので、非表示のdiv onclickを交換するこの関数を持っています

$('#menu a').click(function(){  
    $firstpanel.html($('.' +$(this).attr("rel")).html());   
    $('#bg a:eq(0)').addClass('active2');   
});

ただし、この機能を別の div に複製しようとすると、機能しません。

$('#bg a').click(function(){    
    $('#bg2').html($('.' +$(this).attr("rel")).html()); 
});

コードのソースを表示して、完全なスクリプトを表示できるはずです。

ページへのリンク

HTML

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<html>
<head>

    <!-- Basic Page Needs
  ================================================== -->
    <meta charset="utf-8">
    <title>Campaign/Content</title>
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Mobile Specific Metas
  ================================================== -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <!-- CSS
  ================================================== -->
    <link rel="stylesheet" href="stylesheets/base.css">
    <link rel="stylesheet" href="stylesheets/skeleton.css">
    <link rel="stylesheet" href="stylesheets/layout.css">
    <script src="http://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

    <!--[if lt IE 9]>
        <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Favicons
    ================================================== -->

<script>
$(document).ready(function() {
    var $menu =$('#menu a');
    var $firstpanel =$('#bg');
    var $firstlink =$("a.some-link");
    $menu.click(function(event){
    $menu.removeClass('active');
    $(this).addClass('active');
    });
    $firstlink.live('click', function() {
    $(this).addClass('active2').siblings().removeClass('active2');
    });
$(function(){
    $firstpanel.html($('.' +$('#engage').attr("rel")).html());
    $('#engage').addClass('active');
    $firstpanel.show('drop', '4000');
    $('#bg a:eq(0)').addClass('active2');   
    $('#bgcontainer').show('drop','4000');
    });
$('#menu a').click(function(){
    $firstpanel.html($('.' +$(this).attr("rel")).html());
    $('#bg a:eq(0)').addClass('active2');
    });
$('#bg a').click(function(){
    $('#bg2').html($('.' +$(this).attr("rel")).html());
    });

});
</script>


</head>
<body>


<div id="desktop">
    <!-- Primary Page Layout -->
    <div class="header">

    <a href="index.html" class="brand"><img src="img/MZ_logo_white_smaller.png" alt="MZL logo"></a>

    </div>

    <div class="container">
        <div class="sixteen columns">
            <h1 class="remove-bottom" style="margin-top: 40px"><br></h1>
            <h5>CAMPAIGN/ CONTENT</h5>
            <hr />
        </div>
        <div id="menu"  class="one-third column">
            <a class="btn btnfirst" id="engage" href="#" rel="engagecon"><span>ENGAGE</span></a>
            <a class="btn btnfirst" id="intake" href="#" rel="intakecon"><span>INTAKE</span></a>
            <a class="btn btnfirst" id="plan" href="#" rel="plancon"><span>PLAN</span></a>
            <a class="btn btnfirst" id="execute" href="#"><span>EXECUTE</span></a>
            <a class="btn btnfirst" id="report" href="#"><span>REPORT</span></a>
            <a class="btn btnfirst" id="recognize" href="#"><span>RECOGNIZE</span></a>

        </div>
    <div class="one-third column">
      <div id="bg"></div>
        <div id="bglinks1" class="engagecon show">

            <a class="some-link" href="#" rel="placeholder"><h3>Lorem ipsum</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></a>

            <a class="some-link" href="#" rel="placeholder2"><h3>Lorem ipsum</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></a>

            <a class="some-link" href="#" rel="placeholder3"><h3>Lorem ipsum</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></a>

        </div>

        <div id="bglinks2" class="intakecon show">
            <a class="some-link" href="#" rel="projectinput"><h3>Project Input</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></a>


            <a class="some-link" href="#"><h3>Existing SOQ</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></a>

            <a class="some-link" href="#"><h3>New SOW</h3>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p></a>

        </div>

        <div id="bglinks3" class="plancon show">
            <a class="some-link" href="#"><h3>Schedule Meeting</h3>
            <p>Collaborate on project schedule and basic plan.</p></a>
            <a class="some-link" href="#"><h3>Message Planning</h3>
            <p>Prepare competitive and situation analysis based on project needs and SOW</p></a>
            <a class="some-link" href="#"><h3>Creative Brief</h3>
            <p>Prepare competitive and situation analysis based on project needs and SOW</p></a>
            <a class="some-link" href="#"><h3>Automation</h3>
            <p>Prepare competitive and situation analysis based on project needs and SOW</p></a>

        </div>
    </div>

    <div id="bgcontainer" class="two-thirds column">
     <div id="bg2"></div>
        <div class="placeholder">
            <h3>ACCOUNT</h3>
            <p>

            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br />
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br />
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

            <h3>PLANNING</h3>
            <p>

            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br />
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

            <h3>CREATIVE</h3>
            <p>

            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

            <h3>AUTOMATION</h3>
            <p>

            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </div>
        <div class="placeholder2">
            <h3>ACCOUNT2</h3>
            <p>

            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br />
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br />
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

            <h3>PLANNING</h3>
            <p>

            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br />
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

            <h3>CREATIVE</h3>
            <p>

            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

            <h3>AUTOMATION</h3>
            <p>

            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </div>
        <div class="placeholder3">
            <h3>ACCOUNT3</h3>
            <p>

            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br />
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br />
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

            <h3>PLANNING</h3>
            <p>

            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br />
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

            <h3>CREATIVE</h3>
            <p>

            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

            <h3>AUTOMATION</h3>
            <p>

            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </div>

        <div class="projectinput">
            <h3>ACCOUNT2</h3>
            <p>

            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br />
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br />
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

            <h3>PLANNING</h3>
            <p>

            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.<br />
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

            <h3>CREATIVE</h3>
            <p>

            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

            <h3>AUTOMATION</h3>
            <p>

            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
        </div>
    </div><!-- container -->
 </div>
</div>
<!-- End Document
================================================== -->
</body>
</html>

CSS

.container {
    position: relative;
    width: 960px;
    margin: 0 auto;
    padding: 0;
}

.container .column,
    .container .columns {
    float: left;
    display: inline;
    margin-left: 10px;
    margin-right: 10px;
}

.row {
    margin-bottom: 20px;
}

/* Nested Column Classes */

.column.alpha, .columns.alpha {
    margin-left: 0;
}

.column.omega, .columns.omega {
    margin-right: 0;
}

/* Base Grid */

.container .one.column,
    .container .one.columns {
    width: 40px;
}

.container .two.columns {
    width: 100px;
}

.container .three.columns {
    width: 160px;
}

.container .four.columns {
    width: 220px;
}

.container .five.columns {
    width: 280px;
}

.container .six.columns {
    width: 340px;
}

.container .seven.columns {
    width: 400px;
}

.container .eight.columns {
    width: 460px;
}

.container .nine.columns {
    width: 520px;
}

.container .ten.columns {
    width: 580px;
}

.container .eleven.columns {
    width: 640px;
}

.container .twelve.columns {
    width: 700px;
}

.container .thirteen.columns {
    width: 760px;
}

.container .fourteen.columns {
    width: 820px;
}

.container .fifteen.columns {
    width: 880px;
}

.container .sixteen.columns {
    width: 940px;
}

.container .one-third.column {
    width: 220px;

}



#bg {
    background-color:white;
    padding:10px;
    display:none;
    opacity:1;  
}


.show {
  background-color: white;
}


.arrow{
display:none;   
}

.projectinput{
display:none;   
}

.placeholder2{
display:none;   
}

.placeholder3{
display:none;   
}




.intakecon{
background-color: white;
display:none;
}

.engagecon{
background-color: white;
display:none;
}

.plancon{
background-color: white;
display:none;
}

#bg2 {

background-color: white;
padding: 10px;
display:none;


}

#bgcontainer{
display:none;
padding:10px;
}

.container .two-thirds.column {
    width: 420px;
    background-color:white;
}



.btn {
    display: block;
    width: 154px;
    height: 40px;
    padding: 20px 0 0 30px;
    background: white;
    margin-bottom: 8px;
    opacity: 0.5;
}

a.btn:hover{
opacity:1;
}


a:link {text-decoration:none;}

a:hover{
text-decoration:underline;
color:#7FBCCD;
}
.active{
opacity:1;
}

.active2{
text-decoration:underline;
font-weight:bold;
}




.btn span {
    display: none;
}

.btnfirst {
    padding: 0 0 0 30px;
}

#engage {
    margin:0 0 10px 35px;
    background: url(../images/btn-1.png) no-repeat;
}

#intake {
    margin:0 0 10px 35px;
    background: url(../images/btn-2.png) no-repeat;
}

#plan {
    margin:0 0 10px 35px;
    background: url(../images/btn-3.png) no-repeat;
}

#execute {
    margin:0 0 10px 35px;
    background: url(../images/btn-4.png) no-repeat;
}


#report {
    margin:0 0 10px 35px;
    background: url(../images/btn-5.png) no-repeat;
}

#recognize {
    margin:0 0 10px 35px;
    background: url(../images/btn-6.png) no-repeat;
}

hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; width:960px;height: 0; }

hr, .divide {display: none; }


/* Offsets */

.container .offset-by-one {
    padding-left: 60px;
}

.container .offset-by-two {
    padding-left: 120px;
}

.container .offset-by-three {
    padding-left: 180px;
}

.container .offset-by-four {
    padding-left: 240px;
}

.container .offset-by-five {
    padding-left: 300px;
}

.container .offset-by-six {
    padding-left: 360px;
}

.container .offset-by-seven {
    padding-left: 420px;
}

.container .offset-by-eight {
    padding-left: 480px;
}

.container .offset-by-nine {
    padding-left: 540px;
}

.container .offset-by-ten {
    padding-left: 600px;
}

.container .offset-by-eleven {
    padding-left: 660px;
}

.container .offset-by-twelve {
    padding-left: 720px;
}

.container .offset-by-thirteen {
    padding-left: 780px;
}

.container .offset-by-fourteen {
    padding-left: 840px;
}

.container .offset-by-fifteen {
    padding-left: 900px;
}



/* #Tablet (Portrait)
================================================== */

/* Note: Design for a width of 768px */

@media only screen and (min-width: 768px) and (max-width: 959px) {

.container {
    width: 768px;
}

.container .column,
        .container .columns {
    margin-left: 10px;
    margin-right: 10px;
}

.column.alpha, .columns.alpha {
    margin-left: 0;
    margin-right: 10px;
}

.column.omega, .columns.omega {
    margin-right: 0;
    margin-left: 10px;
}

.alpha.omega {
    margin-left: 0;
    margin-right: 0;
}


.container .one.columns {
    width: 28px;
}

.container .two.columns {
    width: 76px;
}

.container .three.columns {
    width: 124px;
}

.container .four.columns {
    width: 172px;
}

.container .five.columns {
    width: 220px;
}

.container .six.columns {
    width: 268px;
}

.container .seven.columns {
    width: 316px;
}

.container .eight.columns {
    width: 364px;
}

.container .nine.columns {
    width: 412px;
}

.container .ten.columns {
    width: 460px;
}

.container .eleven.columns {
    width: 508px;
}

.container .twelve.columns {
    width: 556px;
}

.container .thirteen.columns {
    width: 604px;
}

.container .fourteen.columns {
    width: 652px;
}

.container .fifteen.columns {
    width: 700px;
}

.container .sixteen.columns {
    width: 748px;
}



.container .one-third.column {
    width: 190px;
}

.container .two-thirds.column {
    width: 220px;
}

.btn {
    display: block;
    width: 154px;
    height: 40px;
    padding: 20px 0 0 30px;
    background: white;
    margin-bottom: 8px;
}

.btn span {
    display: none;
}

.btnfirst {
    padding: 0 0 0 30px;
}

#engage {
    margin:0 0 10px 20px;
    background: url(../images/btn-1.png) no-repeat;
}

#intake {
    margin:0 0 10px 20px;
    background: url(../images/btn-2.png) no-repeat;
}

#plan {
    margin:0 0 10px 20px;
    background: url(../images/btn-3.png) no-repeat;
}

#execute {
    margin:0 0 10px 20px;
    background: url(../images/btn-4.png) no-repeat;
}


#report {
    margin:0 0 10px 20px;
    background: url(../images/btn-5.png) no-repeat;
}

#recognize {
    margin:0 0 10px 20px;
    background: url(../images/btn-6.png) no-repeat;
}


hr { border: solid #ddd; border-width: 1px 0 0; clear: both; margin: 10px 0 30px; width:715px;height: 0; }

/* Offsets */


.container .offset-by-one {
    padding-left: 48px;
}

.container .offset-by-two {
    padding-left: 96px;
}

.container .offset-by-three {
    padding-left: 144px;
}

.container .offset-by-four {
    padding-left: 192px;
}

.container .offset-by-five {
    padding-left: 240px;
}

.container .offset-by-six {
    padding-left: 288px;
}

.container .offset-by-seven {
    padding-left: 336px;
}

.container .offset-by-eight {
    padding-left: 384px;
}

.container .offset-by-nine {
    padding-left: 432px;
}

.container .offset-by-ten {
    padding-left: 480px;
}

.container .offset-by-eleven {
    padding-left: 528px;
}

.container .offset-by-twelve {
    padding-left: 576px;
}

.container .offset-by-thirteen {
    padding-left: 624px;
}

.container .offset-by-fourteen {
    padding-left: 672px;
}

.container .offset-by-fifteen {
    padding-left: 720px;
}


    }

score 1 · Accepted Answer

ソースを見ると、「ID」属性に同じ名前 (値) が割り当てられています。これはノーノーです。各 ID に一意の名前が付けられていることを確認してください。それはあなたの問題かもしれません。たとえば、「show」という名前の ID が 3 つあるとします。

また、これの最後に () を追加する必要があるかもしれません:

$(function(){
$firstpanel.html($('.' +$('#engage').attr("rel")).html());
$('#engage').addClass('active');
$firstpanel.show('drop', '4000');
$('#bg a:eq(0)').addClass('active2');   
$('#bgcontainer').show('drop','4000');
})();

jquery - Jquery関数が2番目のdivで機能しない

1 に答える 1

Related

Reference