Question

我正在尝试一种替代解决方案来解决我一直在展示/隐藏个别div。

我正在尝试使用JQUERY UI下拉菜单作为解决方案，下拉菜单菜单有效但我的点击功能不是。

除了chartdiv1之外，基本上所有div都隐藏在onLoad上，当用户单击菜单项时，其他div将根据需要显示。非常感谢您的帮助。

我的小提琴。 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>

THE 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>

Answer 1

请参阅尝试重用代码，这是您需要的所有脚本

$(document).ready(function() {
            $('.chart').hide();
            $( 'div#chartdiv1' ).show();
            $('.showchart').click( function() {
                $('.chart').hide();
                $('#' + $(this).attr('data-chart')).show();
            });
        });

现在html中的2个更改链接应该像

<a class="showchart" data-chart="chartdiv1">Unit Price</a>我们添加了类和数据图表属性

现在在图表div

<div id="chartdiv1" class="chart" style="width:100%; height:250px; background: #CCC">

添加课程图表

并试试这个

让我知道这对你有用吗？

Answer 2

不知道我为什么重写了代码，但不过。

<a> id已替换为data-id，其中包含id目标元素。
目标<div>的样式放在CSS chartdiv类样式中，包括默认隐藏。
单click个事件处理程序已添加到<a>内的<ul id="menu">。
目标<div>有额外的js-chartdiv类用于隐藏/显示处理。

Fiddle

JS：

$(document).ready(function()
{
    $('.js-chartdiv:first').show();

    $('#menu a').on('click', function()
    {
        $('.js-chartdiv:visible').hide();
        $('#' + $(this).data('id')).show();
    });
});

HTML：

<ul id="menu">
    <li>
        <a data-id="chartdiv1">Unit Price</a>
    </li>
    <li>Unit Price in Alternative Currency
        <ul>
            <li>
                <a data-id="chartdiv2">GSO_EURO</a>
            </li>
            <li>
                <a data-id="chartdiv3">GSO_GBP</a>
            </li>
            <li>
                <a data-id="chartdiv4">GSO_ZAR</a>
            </li>
        </ul>
    </li>
    <li>Unit Price Performance over period
        <ul>
            <li>
                <a data-id="chartdiv5">GSO_USD</a>
            </li>
            <li>
                <a data-id="chartdiv6">GSO_EURO</a>
            </li>
            <li>
                <a data-id="chartdiv7">GSO_GBP</a>
            </li>
            <li>
                <a data-id="chartdiv8">GSO_ZAR</a>
            </li>
        </ul>
    </li>
</ul>
<br /><br />
<div id="chartdiv1" class="chartdiv js-chartdiv">CHARTDIV1 - USD CURRENCY</div>
<div id="chartdiv2" class="chartdiv js-chartdiv">CHARTDIV2 - EURO CURRENCY</div>
<div id="chartdiv3" class="chartdiv js-chartdiv">CHARTDIV3 - GBP CURRENCY</div>
<div id="chartdiv4" class="chartdiv js-chartdiv">CHARTDIV4 - ZAR CURRENCY</div>
<div id="chartdiv5" class="chartdiv js-chartdiv">CHARTDIV5 - USD PERFORMANCE PERIOD</div>
<div id="chartdiv6" class="chartdiv js-chartdiv">CHARTDIV6 - EURO PERFORMANCE PERIOD</div>
<div id="chartdiv7" class="chartdiv js-chartdiv">CHARTDIV7 - GBP PERFORMANCE PERIOD</div>
<div id="chartdiv8" class="chartdiv js-chartdiv">CHARTDIV8 - ZAR PERFORMANCE PERIOD</div>

CSS：

.ui-menu
{
    width: 250px;
    font-weight: 300;
    font-size: 10px;
}
.chartdiv
{
    width: 100%;
    height: 250px;
    background: #CCC;
    display: none;
}

使用JqueryUI下拉菜单显示各个div

2 个答案: