0

私が取り組んでいるプロジェクトには、IE7 ブラウザーでのみ使用される一種のメニューがあります。HTML:

<table class="tabellaquad" cellspacing="20">
    <tr>
        <td>
        <a class="item" href="index.jsp?quad=1">
        <div align="center" class="tabquad">
            ONE
        </div>
        </a>
        </td>
        <td>
        <a class="item" href="index.jsp?quad=7">
        <div align="center" class="tabquad">
            1
        </div>
        </a>
        </td>
        <td>
        <a class="item" href="index.jsp?quad=4">
        <div align="center" class="tabquad">
            RED
        </div>
        </a>
        </td>
    </tr>
    <tr>
        <td>
        <a class="item" href="index.jsp?quad=2">
        <div align="center" class="tabquad">
            TWO
        </div>
        </a>
        </td>
        <td>
        <a class="item" href="index.jsp?quad=8">
        <div align="center" class="tabquad">
            2
        </div>
        </a>
        </td>
        <td>
        <a class="item" href="index.jsp?quad=5">
        <div align="center" class="tabquad">
            BLUE
        </div>
        </a>
        </td>
    </tr>
    <tr>
        <td>
        <a class="item" href="index.jsp?quad=3">
        <div align="center" class="tabquad">
            THREE
        </div>
        </a>
        </td>
        <td>
        <a class="item" href="index.jsp?quad=9">
        <div align="center" class="tabquad">
            3
        </div>
        </a>
        </td>
        <td>
        <a class="item" href="index.jsp?quad=6">
        <div align="center" class="tabquad">
            YELLOW
        </div>
        </a>
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
       <a class="item" href="index.jsp?quad=10">
        <div align="center" class="tabquad">
            4
        </div>
        </a>
        </td>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
        <td>
        <a class="item" href="index.jsp?quad=11">
        <div align="center" class="tabquad">
            5
        </div>
        </a>
        </td>
        <td>
        </td>
    </tr>
</table>

CSS:

.tabellaquad{
margin:auto;
position:relative;
width:40%;
text-align:center;
}

.tabquad{
color:white;
margin:auto;
position:relative;
border:2px solid #000;
border-color:rgb(82,115,154);
width:200px;
height:30px;
text-align:center;
padding-top:10px;
top:25px;
background-color:rgb(0,56,130);
}
.tabquad:hover{
background-color:rgb(49,87,132);
cursor: hand;
}

私がやりたいことは<div>、各列に 3 つの「父」ボタン (a) を用意することです。それらの 1 つをクリックすると、その下にボタンがゆっくりと表示される必要があります (列によって異なります)。

これを行うために使用できる CSS/JS スクリプトはありますか? 私の主な問題は、IE7 を使用する必要があることです。

ここでは、 jsfiddle の例をいくつか見つけることができます。

4

1 に答える 1

-1

まだお持ちでない場合は、JqueryUI をチェックしてください。簡単に習得でき、CSS とアニメーションの基本的な詳細のほとんどすべてを処理してくれます。

http://jqueryui.com/ http://api.jqueryui.com/

また、発生する可能性のあるマルチブラウザーの問題のほとんどすべてを処理します。

于 2013-01-30T15:16:08.003 に答える