私は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;
}
}