Question

href按钮未链接到该页面。当我悬停在按钮上时，游标不会改变为指针。我不知道发生了什么，我已经检查过它不是浏览器问题。我只针对这个问题制作了一个单独的文件（仅限css）。它工作正常。我认为这是由于JavaScript。但我没有写任何关于“href tag”或“button”的脚本。谁能说出我做错了什么？

            <li><a href = "shirt.htm"><button type = "button" class = "sButton" ></button></a></li>

整个代码在这里：

<HTML>
<HEAD>
    <TITLE>Garments</TITLE>
    <LINK REL = "icon" TYPE = "image/png" HREF = "favicon.png">
</HEAD>
<BODY>
    <div class = "UpperHalf">
        <div>
            <img src = "logo.png" alt = "Garments" />
        </div>
    </div>
    <div class= "LowerHalf">
        <ul>
            <li><a href = "shirt.htm"><button type = "button" class = "sButton" ></button></a></li>
            <li><button type = "button" class = "pButton"/></li>
            <li><button type = "button" class = "jButton"/></li>
            <li><button type = "button" class = "hButton"/></li>
        </ul>
    </div>
    <div class = "product">
        <ul>
            <li>
                <img class = "Simg" onmouseover = "shirtImage()" id = "shirt" src = "Shirt1.png" alt = "Shirt" />
            </li>
            <li>
                <img class = "Pimg" onmouseover = "pantImage()" id = "pant" src = "Pant1.png" alt = "Pant" />
            </li>
            <li>
                <img class = "Jimg" onmouseover = "jacketImage()" id = "jacket" src = "Jacket1.png" alt = "Jacket" />
            </li>
            <li>
                <img class = "Himg" onmouseover = "hatImage()" id = "hat" src = "Hat1.jpg" alt = "Hat" />
            </li>
        </ul>
        <script>
            var Shirt = document.getElementById("shirt");
            var Pant = document.getElementById("pant");
            var Jacket = document.getElementById("jacket");
            var Hat = document.getElementById("hat");
            var ShirtArray = ["Shirt1.png", "Shirt2.png", "Shirt3.png", "Shirt4.png"];
            var PantArray = ["Pant1.png", "Pant2.png", "Pant3.png", "Pant4.png"];
            var JacketArray = ["Jacket1.png", "Jacket2.png", "Jacket3.png", "Jacket4.png"];
            var HatArray = ["Hat1.jpg", "Hat2.jpg", "Hat3.jpg", "Hat4.jpg"];
            var Index = 0;

            function shirtImage()
            {
                shirt.setAttribute("src", ShirtArray[Index]);
                    Index++;
                    if(Index >= ShirtArray.length)
                        Index = 0;
            }
            function pantImage()
            {
                pant.setAttribute("src", PantArray[Index]);
                    Index++;
                    if(Index >= PantArray.length)
                        Index = 0;
            }
            function jacketImage()
            {
                jacket.setAttribute("src", JacketArray[Index]);
                    Index++;
                    if(Index >= JacketArray.length)
                        Index = 0;
            }
            function hatImage()
            {
                hat.setAttribute("src", HatArray[Index]);
                    Index++;
                    if(Index >= HatArray.length)
                        Index = 0;
            }
            setInterval(shirtImage, 1000);
            setInterval(pantImage, 1000);
            setInterval(jacketImage, 1000);
            setInterval(hatImage, 1000);
        </script>
    </div>
    <style type = "text/css" rel="stylesheet">
        .UpperHalf
        {
            background: url("background.jpg");
            background-repeat: no-repeat;
            position: fixed;
            left: 0px;
            top: 0px;
            height: 100%;
            width: 100%;
            z-index: -1;
        }
        .LowerHalf
        {
            background: url("half.png");
            background-repeat: no-repeat;
            position: fixed;
            height: 60%;
            width: 99.2%;
            left: -8px;
            top: 325px;
            z-index: -1;
        }
        .LowerHalf ul li
        {
            display: inline-block;
            margin: 110px 0px 0px 100px;
        }
        .sButton
        {
            background-image: url(bShirt.png);
            background-repeat: no-repeat;
            border: none;
            cursor: pointer;
            height: 50px;
            width: 160px;
        }
        .pButton
        {
            background-image: url(bJeans.png);
            background-repeat: no-repeat;
            border: none;
            cursor: pointer;
            height: 50px;
            width: 160px;
        }
        .jButton
        {
            background-image: url(bJacket.png);
            background-repeat: no-repeat;
            border: none;
            cursor: pointer;
            height: 50px;
            width: 160px;
        }
        .hButton
        {
            background-image: url(bHat.png);
            background-repeat: no-repeat;
            border: none;
            cursor: pointer;
            height: 50px;
            width: 160px;
        }
        .product ul li
        {
            display: inline-block;
            margin: 120px 0px 0px 96px;
        }
        .Simg
        {
            background-image: url(Shirt1.png);
            background-repeat: no-repeat;
            border: none;
            cursor: pointer;
            height: 300px;
            width: 160px;
            z-index: 1;
        }
        .Pimg
        {
            background-image: url(Pant1.png);
            background-repeat: no-repeat;
            border: none;
            cursor: pointer;
            height: 300px;
            width: 160px;
            z-index: 1;
        }
        .Jimg
        {
            background-image: url(Jacket1.png);
            background-repeat: no-repeat;
            border: none;
            cursor: pointer;
            height: 300px;
            width: 160px;
            z-index: 1;
        }
        .Himg
        {
            background-image: url(Hat1.png);
            background-repeat: no-repeat;
            border: none;
            cursor: pointer;
            height: 300px;
            width: 160px;
            z-index: 1;
        }
    </style>
</BODY>

href标签不能在html中工作

0 个答案: