1
Я пытаюсь найти альтернативное решение проблемы, которое у меня было с отображением/скрытием отдельных div.С помощью раскрывающегося меню JqueryUI, чтобы показать отдельные divs
Я пытаюсь использовать раскрывающееся меню JQUERY UI в качестве решения, выпадающее меню меню работает, но мои функции щелчка нет.
В принципе, все divs скрыты onLoad, за исключением chartdiv1, поскольку пользователь нажимает пункты меню, тогда другие divs будут отображаться по мере необходимости. Ваша помощь очень ценится.
мой js скрипка. 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, я реализовал его согласно предложению она не работает, я я поставил бы js fiddle, может быть, я сделал что-то не так. вопрос должен был бы не меняться .showchart по каждой ссылке, то есть .showchart1,2, 3 ............. не имеет смысла, хотя класс aa может использоваться более одного раза в документе – jasonh
как в CSS ** class ** может использоваться N количество раз, когда как ** id ** можно использовать один раз. –
, пожалуйста, добавьте в скрипку, поэтому проверьте свой код –