javascript - 如何通过单击另一个 <div> 中的 href 和按钮使 2 个重叠的 <div> 依次显示?

标签 javascript jquery html css

这是我的代码的一个简短示例:

<body>

<div class="ContentDiv">


    +------------+--------------+
    | [checkbox] | file1 | view |   view is a hyperlink 
    +------------+--------------+
    | [checkbox] | file2 | view |   
    +------------+--------------+

    <a href="view.php" target="outputframe">View</a>

    +------------------+
    | Compare selected |    Compare selected is a button
    +------------------+

    <input type="submit" class="button green" value="Compare selected"/>

</div>

<div class="Output1" id="Output1">
    <iframe src="view.php" name="outputframe" height="110px" width="500px" frameborder="0" marginheight="0" marginwidth="0" scrolling="auto">
        <p>Your browser does not support iframes.</p>
    </iframe>
</div>

<div class="Output2" id="Output2">
    <compare> comparisons of files functions...</compare>
</div>

<script type="text/javascript">
    jQuery('?').click(function(event){
            event.preventDefault();
                jQuery('#Output2').hide();
                jQuery('#Output1').show();
        });
        jQuery('?').click(function(event){
               event.preventDefault();
               jQuery('#Output1').hide();
               jQuery('#Output2').show();
        });
</script>

</body>

我已经熟悉使用 javascript,它可以通过单击(例如)按钮“表格”显示 TableDiv 和按钮“直方图”显示 HistogramDiv,使两个不同的 div 依次显示。

现在的问题是,我不知道如何对表格中的 href 和表单内的按钮应用同样的事情来做同样的事情。

最佳答案

像这样:

jQuery('input[type="submit"][value="Compare selected"]').click(function(event){
            event.preventDefault();
                jQuery('#Output1').toggle();
                jQuery('#Output2').toggle();
        });

首先使用要显示和隐藏的 css 为#Output1 和#Output2 设置显示属性。

关于javascript - 如何通过单击另一个 <div> 中的 href 和按钮使 2 个重叠的 <div> 依次显示?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22753904/

相关文章:

jquery - 使菜单响应

javascript - jqueryui如何设置可拖动对象的限制?

javascript - 使用 Javascript 计算 HTML 中的行数

html - 在同一行上获取 Twitter 推文和 Facebook 点赞

html - 在整个导航背景上更改导航 Sprite ,而不仅仅是一个链接

javascript - 使用指针悬停时如何让文本显示在所有卡片中

javascript - 如何像php页面中的新闻提要一样在循环中垂直滚动div内容

javascript - 将可排序包含限制为表中的特定行

javascript - jQuery:如何获取表格单元格数据并将其 append 到输入字段?

javascript - 如何在 jquery 中创建垂直滚动的 div?