Javascript Html--单击按钮时显示元素_Javascript_Html_Css

Javascript Html--单击按钮时显示元素

javascript html css

Javascript Html--单击按钮时显示元素,javascript,html,css,Javascript,Html,Css,我有一个下面的html页面。这里我的要求是：—— 1> 按下顶部蔬菜按钮时，将显示6种蔬菜。 2> 当按下顶部动物按钮时，将显示20只动物。 3> 当按下topautomobile按钮时，将显示26辆汽车我张贴的基本布局。我的想法是添加26个元素（因为div id=“center”中的元素最大数量可以是26个，但不能超过这个数量）在div“center”中。并根据按下的按钮隐藏div和change image以及描述这条路对吗。请建议如何实现这一点 <!DOCTYPE html>

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

我张贴的基本布局。我的想法是添加26个元素（因为div id=“center”中的元素最大数量可以是26个，但不能超过这个数量）在div“center”中。并根据按下的按钮隐藏div和change image以及描述

这条路对吗。请建议如何实现这一点

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


我的物品清单
正文，html{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
位置：相对位置；
}
.输入{
显示：内联块；
填充：0.2px；
}
.输入{
显示：块；
}
.imgtxt{
保证金：0；
字体系列：arial；
颜色：#DDDFED；
字体大小：15px；
}
#图像{
背景颜色：灰色；
空白：nowrap；
}
可滚动分区{
保证金：0；
填充：0；
溢出：自动；
左侧填充：4px；
填充顶部：20px；
框大小：边框框；
}
div.scrollableMenu{
保证金：0；
填充：0；
溢出：自动；
左侧填充：4px；
填充顶部：20px；
框大小：边框框；
}
分区滚动中心{
保证金：0；
填充：0；
溢出：自动；
左侧填充：4px；
填充顶部：20px；
框大小：边框框；
}
#居中{
背景色：#292B3B；
位置：绝对位置；
顶部：115px；
左：0px；
右：0px；
底部：20px；
}
#福特{
背景色：#CC99FF；
文本对齐：居中；
位置：绝对位置；
左：0；
底部：0；
宽度：100%；
}
可种植
动物
汽车
布林哈尔

花椰菜

番茄

拉迪芬格

萝卜

生姜

项目清单

我建议添加class.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

以下是JSFIDLE示例：

基本上，你会想再添加3个div，以方便我分别使用id为center和2个center1 center2的现有div 将Html内容更改为

是吗？我试过如何隐藏一个div。。但我只是想确认一下什么是完成这项任务的正确方法。我有一个问题。。假设水平方向上大约有20个div元素，如动物、植物、人体器官、蔬菜、汽车。。等每个元素大约有15个div项。。。那么你的答案也是一个不错的选择？这不会导致网页超载吗？此外，如果div元素被隐藏，那么是否可以更改隐藏元素的图像或文本@卡托赫：我认为这应该不是一个问题，即使我假设有20个类别。如果有更多的问题，请在这里发表评论，然后我们会考虑。是的，您可以自由更改隐藏的元素，因为它们仍然存在，但只是没有显示。目前jquery任务是硬编码的，用于显示或隐藏div。。。。是否可以编写一个泛型函数showclass（）来执行jquery任务。。。我们已将要隐藏或显示的类存储在数组中。。变量区域id=[“动物”、“蔬菜”、“汽车”]；现在应该根据这个数组决定显示或隐藏哪个类。。例如，我们将以这种方式调用此泛型函数。。。。单击“自动”类的按钮时。。onclick=“showclass（'car'）”。。。。单击类veg的按钮时。。onclick=“showclass（‘蔬菜’）”。。。。单击类动物的按钮时。。onclick=“showclass（‘动物’）”。。。。。

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

$('#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");
    }
);