Question

我创建了一个包含2个不同行的列表（导航菜单）。该行中的每一行都连接到图表。例如，第1行（温度）连接到温度图（table1和table2）。

我希望用户通过单击导航菜单来决定要查看哪个表，如果该人希望查看另一个表，则必须在下一个表出现之前关闭第一个图表。那么我在javascript（JQuery）中要做什么才能将row1与table1和row2与table2连接起来？

问题是，当我点击下一行时，没有任何反应。

这个index.html：

    <!--Link to tables-->
    <script type="text/javascript" src="js/diagram1"></script>
    <script type="text/javascript" src="js/diagram2"></script>

</head>
<body>

    <div id = "diagram1"></div> <!--Import html file for chartcontainer-->
    <div id = "diagram2"></div> <!--Import html file for chartcontainer-->
</body>

这是我在index.html中包含的另一个文件中的javascript。

                <ul class="list-group">
                <!--Set this inside a div to individuelly choose-->
                    <div id = "1"><li class="list-group-item">Exhaust Temperature</li></div>
                    <div id = "2"><li class="list-group-item">Cylinder Pressure</li></div>
                </ul>
            </div>
        </div>

    </div> <!-- end row -->
</div> <!-- container -->

<script>
$(function(){
    $('#1').on('click',function(){
        $('#table1').toggle();
    });

    $('#2').on('click',function(){
        $('#table2').toggle();
    });                     
});

亲切的问候 Dler H.

Answer 1

你可以隐藏另一张桌子：

$(function(){
    $('#div1').on('click',function(){
        $('#table2').hide();
        $('#table1').toggle();
    });

    $('#div2').on('click',function(){
        $('#table1').hide();
        $('#table2').toggle();
    });
});

并改变你的ID：

<div id = "div1"><li class="list-group-item">Exhaust Temperature</li></div>
<div id = "div2"><li class="list-group-item">CylinderPressure</li></div>

Answer 2

Html ID必须标有字母http://www.electrictoolbox.com/valid-characters-html-id-attribute/，因此您无法执行此操作id='1'

Javascript事件绑定无法正常工作？

2 个答案: