Question

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

我发布了基本布局。我在想的是添加26个元素（div id =“center”中的元素最大数量可以是26不超过这个）在div“中心”。隐藏divs＆amp;改变图像＆amp;按下按钮的描述。

这是正确的方法吗？请建议如何实现这个目标？

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

enter image description here

Answer 1

我建议添加一个类.vegatable，.car，.animal来分隔你的图像，然后简单地做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/

Answer 2

Click here for demo

基本上你想要添加3个div以方便我使用已经存在的div与id center和2 more center1 center2

将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");
    }
);

Html - 单击按钮时显示元素

2 个答案:

基本上你想要添加3个div以方便我使用已经存在的div与id center和2 more center1 center2

将Html内容更改为此

Jquery脚本