堆棧內存溢出
  簡體   English   中英

HTML —單擊按鈕時顯示元素

[英]Html — display elements when button is clicked

 原文  2014-04-09 11:22:14  9   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