Question

点击它时，我无法获取div标签来打开另一个页面/本地html文件。

我有一个由5个按钮组成的菜单（div＆＃39; s）这些按钮有背景图像而不是颜色，因为Dream weaver没有字体。每个按钮还有一个悬停在功能上，可以更改div以显示反转的图像。

在谷歌搜索如何使整个div可点击，然后打开下一页（本地文件）后，没有任何方法对我有效。

我想要做的就是当＆＃34;产品按钮＆＃34; div被点击了名为＆＃34; Products.html＆＃34;的本地html文件。打开并显示该页面上的内容。

我的源代码是：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<link href="CSS/design.css" rel="stylesheet" type="text/css">


<div id="wrapper">

  <div id="header"></div>

  <div id="menu">

    <div id="homebutton"></div>
    <div id="Productsbutton"></div>    
    <div id="Gallerybutton"></div>
    <div id="Menubutton"></div>
   <div id="Aboutbutton"></div>

  </div>

我的CSS是

@charset "utf-8";
/* CSS Document */
body{
    background-image:url(/Images/background.jpg);
    background-repeat: no-repeat;  
    Width:1400px;
    height:1400px;
}

#wrapper{
    Width:1000px;
    Height:1400px;
    margin-left:auto;
    margin-right:auto;
    padding:5px;
}


 #header{
     width:1000px;
     height:250px;
    background-image:url(/Images/banner.png);
}

#menu{
    width:1000px;
    height:35px;
    background-color:#1790e1;
    border-radius:5px;
}

   #homebutton{
    width:200px;
     height:35px;
      background-image:url(/Images/Menu_Buttons/Home%20Button.png);
     float:left;
      -webkit-transition: all 0.3s ease;
      -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease; 
     -o-transition: all 0.3s ease;
      transition: all 0.3s ease;
      border-bottom-left-radius:5px;
}

  #homebutton:hover{
background-image:url(/Images/Menu_Buttons/Home%20Button%20Hover.png);
filter: alpha(opacity=200);
opacity:2;
}

#Aboutbutton{
width:200px;
height:35px;
float:left;
background-image:url(/Images/Menu_Buttons/About.png);
border-bottom-right-radius:5px;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease; 
-o-transition: all 0.3s ease;
 transition: all 0.3s ease;
}

#Aboutbutton:hover{
background-image:url(/Images/Menu_Buttons/About%20Hover.png);
filter: alpha(opacity=200);
opacity:2;
border-bottom-right-radius:5px;
}

 #Gallerybutton{
width:200px;
height:35px;
float:left;
background-image:url(/Images/Menu_Buttons/Gallery.png);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease; 
-o-transition: all 0.3s ease;
 transition: all 0.3s ease;
 }

 #Gallerybutton:hover{
background-image:url(/Images/Menu_Buttons/Gallery%20Hover.png);
filter: alpha(opacity=200);
opacity:2;
}

 #Menubutton{
width:200px;
height:35px;
float:left;
background-image:url(/Images/Menu_Buttons/Services.png);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease; 
-o-transition: all 0.3s ease;
 transition: all 0.3s ease;
}

#Menubutton:hover{
background-image:url(/Images/Menu_Buttons/Services%20Hover.png);
filter: alpha(opacity=200);
opacity:2;
}

#Productsbutton{
width:200px;
height:35px;
float:left;
background-image:url(/Images/Menu_Buttons/Products.png);
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease; 
-o-transition: all 0.3s ease;
 transition: all 0.3s ease;
 color:#000000;

}

#Productsbutton:hover{
background-image:url(/Images/Menu_Buttons/Products%20Hover.png);
filter: alpha(opacity=200);
opacity:2;
 }

Answer 1

您应该为每个可点击的div使用cursor: pointer;，让用户知道它是可点击的。

然后你应该在每个div中调用onclick()来触发点击并打开相应的页面。

<div id="homebutton" onclick="openPage('Home.html')"> </div>

并在JS文件中，

 function openPage(pageUrl){
       window.open(pageUrl);
     }

有关如何在另一个标签页上打开页面的模式详细信息，请参阅link to W3Schools

Answer 2

为了将此解决方案严格保持为html，我认为答案应该是在div周围包含 a href 标记。

<a href="Products.html">
    <div id="Productsbutton">Products</div>
</a>

html文件的最终版本：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <link href="CSS/design.css" rel="stylesheet" type="text/css">

    <div id="wrapper">
      <div id="header"></div>
        <div id="menu">

        <div id="homebutton">awdwa</div>
        <a href="Products.html">
          <div id="Productsbutton">Products</div>   
        </a>
        <div id="Gallerybutton">bbbb</div>
        <div id="Menubutton">ccc</div>
        <div id="Aboutbutton">ddd</div>

      </div>
    </div>
  </head>
</html>

Answer 3

你可以通过添加你的身份

来做到这一点

       #homebutton{


      cursor: pointer;
}

OR

<a id="homebutton" href="#"></a>

Answer 4

<div id="Productsbutton" onclick="nav('Products.html')">Products</div>


function nav(page) {   
  window.location.href=page
}

单击div标签并使其打开另一个页面/ html文件

4 个答案: