堆栈内存溢出
  繁体   English   中英

HTML —单击按钮时显示元素

[英]Html — display elements when button is clicked

 原文  2014-04-09 11:22:14  7   2    javascript/ html/ css

问题描述

我有以下html页面。 我的要求是：
1>按下顶部蔬菜按钮时，将显示6种蔬菜。
2>当按下顶部动物按钮时，将显示20只动物。
3>按下topautomobile按钮时，将显示26辆汽车。

我正在发布基本布局。 我在想的是在div“中心”中添加26个元素（因为div id =“ center”中的最大元素数可以不超过26个）。 并隐藏divs并根据按下的按钮更改图像和说明。

这是正确的方法。 请提出如何实现这一目标？ 

<!DOCTYPE html>
<html style="height: 100%;">

<head>
<title>My item list </title>
<style>
body, html {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    position:relative;
}
.input {
    display: inline-block;
    padding: 0 2px;
}
.input input {
    display: block;
}
.imgtxt {
    margin: 0;
    font-family:arial;
    color:#DDDFED;
    font-size:15px;
}
#images {
    background-color: grey;
    white-space:nowrap;
}
div.scrollable {
    margin: 0;
    padding: 0;
    overflow: auto;
    padding-left: 4px;
    padding-top: 20px;
    box-sizing:border-box;
}


div.scrollableMenu {
    margin: 0;
    padding: 0;
    overflow: auto;
    padding-left: 4px;
    padding-top: 20px;
    box-sizing:border-box;
}

div.scrollableCenter {
    margin: 0;
    padding: 0;
    overflow: auto;
    padding-left: 4px;
    padding-top: 20px;
    box-sizing:border-box;
}

#center {
    background-color:#292B3B;
    position:absolute;
    top:115px;
    left:0px;
    right:0px;
    bottom:20px;
}
#fotter {
    background-color:#CC99FF;
    text-align:center;
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
}
</style>
</head>

<body >
    <div id="images" class="scrollable">
        <div class="input">
            <input type="image" src="http://t3.gstatic.com/images?q=tbn:ANd9GcRTBRnn9Aqx74JvKyJ7Z5ydbXXuj8cIDVuOdJZUxb02Q2LWfJGP" onclick="alert('clicked')" title="Room one" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">vegitable</p>
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQPsZfek4J5rZKHyPdgWu7qq9WJJzlpSSwCmUAFQflwLJqWxk_5sfy7r0mJ" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Animals</p>
        </div>
        <div class="input">
            <input type="image" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRhxj6l2Y_6ZiqXnY6fx-nLUgVzMMkdAndmMSTyJR31T15Itl2FZBAqlaSa" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Automobile</p>
        </div>
    </div>
    <div id="center" class="scrollableCenter">
        <div >
            <input type="image" src="http://t1.gstatic.com/images?q=tbn:ANd9GcTMPmp8aVaovrd3AGj1_hL_GEXX1M4DJ-TTMJ34Vr622XeY_usu" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">brinjal</p>
        <hr/>
        </div>

        <div >
            <input type="image" src="http://upload.wikimedia.org/wikipedia/commons/2/25/Cauliflower.JPG" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">cauliflower</p>
        <hr/>
        </div>

        <div >
            <input type="image" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQJgt4i9ph9uQsS3JV940PBg-kwN1kkrKbC6FLYI6UhbxucEb91" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">tomato</p>
        <hr/>
        </div>

    <div >
            <input type="image" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT-mwuxaqQeHXjoZzPUoee9Rvg8Jq-eCvo8H0EgEtapjfr6U4E3" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">ladyfinger</p>
        <hr/>
        </div>

    <div >
            <input type="image" src="http://t2.gstatic.com/images?q=tbn:ANd9GcQRxXUO2stKHLyET_rXpxOuLp67qc1IzlBcJGke5jYoGPeRZpnO" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">radish</p>
        <hr/>
        </div>

    <div >
            <input type="image" src="http://t3.gstatic.com/images?q=tbn:ANd9GcT2zCeG621TSX1YmcsT9DPLaQJkdVwdYk_n-eWECCa8NTtXR0LFeQ" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">ginger</p>
        <hr/>
        </div>
    </div>
    <div id="fotter">List of Items</div>
</body>
</html>

在此处输入图片说明

2 个解决方案

解决方案1
 0 已采纳  2014-04-09 11:54:34

我建议添加一个类.vegatable，.car和.animal来分隔包含您的图像的div，并简单地在thme上执行show（）/ hide（）。 这将需要jQuery，但会使事情变得非常简单。 

$('.animal').show();  // this will show all divs that have animal class set
$('.vegetable').hide();  // this will hide all divs that have vegetable class set
$('.car').hide();  // this will hide all divs that have car class set

这是jsfiddle示例： http : //jsfiddle.net/TbBgA/2/

解决方案2
 0  2014-04-09 11:55:09

点击此处进行演示

基本上，您会想轻松添加3个div我分别使用了ID中心和2个center1 center2分别存在的div

将HTML内容更改为此 

<div id="images1" class="scrollable">
        <div class="input">
            <input id="imgtxtV" type="image" src="http://t3.gstatic.com/images?q=tbn:ANd9GcRTBRnn9Aqx74JvKyJ7Z5ydbXXuj8cIDVuOdJZUxb02Q2LWfJGP" onclick="alert('clicked')" title="Room one" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">vegitable</p>
        </div>
        <div class="input">
            <input id="imgtxtA" type="image" src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcQPsZfek4J5rZKHyPdgWu7qq9WJJzlpSSwCmUAFQflwLJqWxk_5sfy7r0mJ" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Animals</p>
        </div>
        <div class="input">
            <input id="imgtxtAUTo" type="image" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcRhxj6l2Y_6ZiqXnY6fx-nLUgVzMMkdAndmMSTyJR31T15Itl2FZBAqlaSa" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Automobile</p>
        </div>
    </div>

jQuery脚本 

$('#imgtxtV').click(function(){
    alert("clicked vegitables");

    $("#center").css("display", "block");
     $("#center1").css("display", "none");
     $("#center2").css("display", "none");
    }
);
$('#imgtxtA').click(function(){
    alert("clicked Animals");

    $("#center").css("display", "none");
     $("#center1").css("display", "block");
     $("#center2").css("display", "none");
    }
);
$('#imgtxtAUTo').click(function(){
    alert("clicked AutoMobiles");

    $("#center").css("display", "none");
     $("#center1").css("display", "none");
     $("#center2").css("display", "block");
    }
);

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 单击行中的按钮时获取HTML TR的元素 单击时将在HTML表中显示隐藏列的按钮 显示前5个子元素，并在单击下一个按钮时将其隐藏，并使用jquery显示后5个子元素 JavaScript错误…单击按钮时未创建元素 在 JavaScript 中单击按钮时如何显示元素 加载或单击时如何从 HTML 元素“按钮”和“img”中删除轮廓？ 单击时使用javascript删除HTML元素 单击按钮时隐藏 div 并显示 div 在GridView中单击“删除”按钮时显示文本 单击按钮时如何随机显示文本
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM