1
개별 솔루션을 표시하거나 숨기는 데있어 다른 솔루션을 시도하고 있습니다.개별 div를 표시하기 위해 JqueryUI 드롭 다운 메뉴 사용
드롭 다운 메뉴 메뉴가 작동하지만 클릭 기능이없는 해결책으로 JQUERY UI 드롭 다운 메뉴를 사용하려고합니다.
기본적으로 모든 div는 chartdiv1을 제외하고 onLoad에 숨겨져 있습니다. 사용자가 메뉴 항목을 클릭 한 다음 필요에 따라 다른 div가 표시됩니다. 귀하의 도움을 크게 주시면 감사하겠습니다.
my js fiddle. http://jsfiddle.net/Jason1975/qtdojq2g/
HTML
<body onLoad="hide()">
<ul id="menu">
<li><a id="1">Unit Price</a></li>
<li>Unit Price in Alternative Currency
<ul>
<li><a id="2">GSO_EURO</a></li>
<li><a id="3">GSO_GBP</a></li>
<li><a id="4">GSO_ZAR</a></li>
</ul>
</li>
<li>Unit Price Performance over period
<ul>
<li><a id="5">GSO_USD</a></li>
<li><a id="6">GSO_EURO</a></li>
<li><a id="7">GSO_GBP</a></li>
<li><a id="8">GSO_ZAR</a></li>
</ul>
</li>
</ul>
<br /><br />
<!-- Chart Divs -->
<!-- Chartdiv1 - Unit Price in US Dollars -->
<div id="chartdiv1" style="width:100%; height:250px; background: #CCC"">CHARTDIV1 - USD CURRENCY</div><br />
<!-- End Chartdiv1 -->
<!-- Chartdiv2 - EURO Currency -->
<div id="chartdiv2" style="width:100%; height:250px; background: #CCC">CHARTDIV2 - EURO CURRENCY</div><br />
<!-- End Chartdiv2 -->
<!-- Chartdiv3 - GBP Currency -->
<div id="chartdiv3" style="width:100%; height:250px; background: #CCC">CHARTDIV3 - GBP CURRENCY</div><br />
<!-- End Chartdiv3 -->
<!-- Chartdiv4 - ZAR Currency -->
<div id="chartdiv4" style="width:100%; height:250px; background: #CCC">CHARTDIV4 - ZAR CURRENCY</div><br />
<!-- End Chartdiv3 -->
<!-- Chartdiv5 - USD Unit Price Perfomance over a Period -->
<div id="chartdiv5" style="width:100%; height:250px; background: #CCC">CHARTDIV5 - USD PERFORMANCE PERIOD</div><br />
<!-- End Chartdiv5 -->
<!-- Chartdiv6 - EURO Unit Price Perfomance over a Period -->
<div id="chartdiv6" style="width:100%; height:250px; background: #CCC">CHARTDIV6 - EURO PERFORMANCE PERIOD</div><br />
<!-- End Chartdiv6 -->
<!-- Chartdiv7 - GBP Unit Price Perfomance over a Period -->
<div id="chartdiv7" style="width:100%; height:250px; background: #CCC">CHARTDIV7 - GBP PERFORMANCE PERIOD</div><br />
<!-- End Chartdiv7 -->
<!-- Chartdiv8 - ZAR Unit Price Perfomance over a Period -->
<div id="chartdiv8" style="width:100%; height:250px; background: #CCC">CHARTDIV8 - ZAR PERFORMANCE PERIOD</div><br />
<!-- End Chartdiv8 -->
<br>
JQuery와
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function() {
hide();
$('#a#1').click(function() {
var $select = $(this);
if ($select) {
$('div#chartdiv1').show();
} else {
$('div#chartdiv1').hide();
}
});
$('a#2').click(function() {
var $select = $(this);
if ($select) {
$('div#chartdiv2').show();
} else {
$('div#chartdiv2').hide();
}
});
$('a#3').click(function() {
var $select = $(this);
if ($select) {
$('div#chartdiv3').show();
} else {
$('div#chartdiv3').hide();
}
});
$('a#4').click(function() {
var $select = $(this);
if ($select) {
$('div#chartdiv4').show();
} else {
$('div#chartdiv4').hide();
}
});
$('a#5').click(function() {
var $select = $(this);
if ($select) {
$('div#chartdiv5').show();
} else {
$('div#chartdiv5').hide();
}
});
$('a#6').click(function() {
var $select = $(this);
if ($select) {
$('div#chartdiv6').show();
} else {
$('div#chartdiv6').hide();
}
});
$('a#7').click(function() {
var $select = $(this);
if ($select) {
$('div#chartdiv7').show();
} else {
$('div#chartdiv7').hide();
}
});
$('a#8' ).click(function() {
var $select = $(this);
if ($select) {
$('div#chartdiv8').show();
} else {
$('div#chartdiv8').hide();
}
});
});
function hide() {
var show = ['chartdiv1'];
for (var i = 0; i < show.length; ++i)
document.getElementById(show[i]).style.display = "block";
var hide = ['chartdiv2','chartdiv3','chartdiv4','chartdiv5','chartdiv6','chartdiv7','chartdiv8','hidden','hidden2','currency','currency2'];
for (var i = 0; i < hide.length; ++i)
document.getElementById(hide[i]).style.display = "none";
}
//END OF ALL THE CHART ITEMS
</script>
안녕이 answeer 주셔서 감사합니다, 나는 그것이 작동하지 않습니다 제안 당으로 구현 한 I 어쩌면 내가 잘못한 짓을했을 수도 있습니다. 질문은 내가 .showchart를 각 링크 즉, .showchart1,2, 3 .............을 변경하지 않아야한다고 생각한다. 비록 클래스가 문서에 두 번 이상 사용될 수 있지만 – jasonh
CSS ** 클래스 ** 당 ** id ** **를 한 번 사용할 수있는 N 번 사용할 수 있습니다. –
바이올린에 코드를 추가하십시오. –