Нажмите на тег Div и сделайте так, чтобы он открыл другую страницу / HTML-файл - PullRequest
Новая
       11

Нажмите на тег Div и сделайте так, чтобы он открыл другую страницу / HTML-файл

0 голосов
/ 13 июня 2018

У меня проблемы с получением тега div для открытия другой страницы / локального файла html при его нажатии.

У меня есть меню, состоящее из 5 кнопок (div). Эти кнопки имеют фоновое изображение вместоцвет, потому что ткач мечты не имеет шрифта.Каждая кнопка также имеет функцию наведения мыши, которая изменяет элемент div для отображения перевернутого изображения.

После поиска в Google, как сделать весь элемент div кликабельным, а затем открыть следующую страницу (локальный файл) ни одним из методовработал на меня.

То, что я хочу сделать, например, для случая, когда div «productsbutton» щелкает по локальному html-файлу «Products.html», чтобы открыть и отобразить содержимое на этой странице.

MyИсходный код: 

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

Ответы [ 4 ]

0 голосов
/ 13 июня 2018

Чтобы сохранить это решение строго в формате html, я считаю, что ответ должен заключаться в том, чтобы обернуть тег href вокруг div. 

<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>
0 голосов
/ 13 июня 2018 
<div id="Productsbutton" onclick="nav('Products.html')">Products</div>


function nav(page) {   
  window.location.href=page
}
0 голосов
/ 13 июня 2018

Вы должны использовать cursor: pointer; для каждого кликабельного div, чтобы пользователи знали, что он кликабелен.

Затем вы должны вызвать onclick() даже в каждом div, чтобы вызвать щелчок и открыть соответствующую страницу. 

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

и в файле JS, 

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

Для получения подробной информации о режиме, как открыть страницу на другой вкладке, есть ссылка на W3Schools

0 голосов
/ 13 июня 2018

Вы можете сделать это, добавив в свой идентификатор 

       #homebutton{


      cursor: pointer;
}

ИЛИ 

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