Cargando contenido en un div [cerrado] -- javascript campo con jquery campo con html campo con css camp Relacionados El problema

Loading content into a div [closed]


0
vote

problema

Español
cerrado . Esta pregunta debe ser más enfocado . Actualmente no está aceptando respuestas.

¿Quieres mejorar esta pregunta? Actualizar la pregunta para que se enfoca en un problema solo por Edición de este post .

CERRADO hace 5 años .

Mejorar esta pregunta

Estoy tratando de crear una página con imágenes que, con un usuario que flotan, cargan el contenido en un div en la misma página. Hasta ahora, he creado el archivo HTML y la hoja de estilo. Es una página bastante simple, basada en la tabla, con tres imágenes que tienen el efecto CSS flotando en ellos y vinculan a tres páginas diferentes. Mi desafío es averiguar cómo cargar contenido en el DIV. Soy completamente nuevo en Javascript para que esta sea la curva de aprendizaje que imagino, pero cualquier ayuda será apreciada. He adjuntado una imagen para ilustrar lo que estoy tratando de hacer. Gracias a todos ! [Descripción de la página] 1

Pregunta actualizada. Gracias por su aporte a todos. (De vuelta de las vacaciones, irá por encima de sugerencias)

Mi código CSS:

  .Image1{ background-image:url('Image1_REG.jpg');  height:86px; width:86px; display: block; }  .Image1:hover { background-image:url('Image1_Shadow.jpg'); height:86px; width:86px; display:block; }  .Image2{ background-image:url('Image2_REG.jpg');  height:86px; width:86px; display: block; }  .Image2:hover { background-image:url('Image2_Shadow.jpg'); height:86px; width:86px; display:block; }  .Image3{ background-image:url('Image3_REG.jpg');  height:86px; width:86px; display: block; }  .Image3:hover { background-image:url('Image3_Shadow.jpg'); height:86px; width:86px; display:block; }  #contentDiv{ height:150px; width:350px; left:50px; top:150px; position:absolute; background-color:#452835;}  table { width:600px; height:auto; column-width:200px; left:150px; top:150px; }    <!DOCTYPE html> <html lang="en">   <head>    <link rel="stylesheet" type="text/css" href="newStyle.css"></link>   </head>   <body>   <body>   <table>   <tbody>   <tr><img src="header.jpg" align ="center" /></tr>     <tr>       <td><a class="Image1" href="http://link1" target="_blank"></a> </td>       <td>       <a class="Image2" href="http://link2" target="_blank"></a>       </td>       <td><a class="Image3" href="http://link3" target="_blank"></a></td>     </tr>   </tbody> </table> <div id="contentDetails">Where the hover text is to be displayed</div>  </body> </html>   
Original en ingles

I am trying to create a page with images that upon a user hovering loads content into a div on the same page. So far, I have created the html file and the stylesheet. It's a fairly simple, table-based page, with three images that have the css hover effect on them and link to three different pages. My challenge is figuring out how to load content into the div. I am completely new to Javascript so this is going to be quite the learning curve I imagine but any help will be appreciated. I have attached an image to illustrate what I am trying to do. Thanks everyone![page description]1

Updated question. Thanks for your input everybody. (Back from the holidays - will be going over suggestions)

My css code:

.Image1{ background-image:url('Image1_REG.jpg');  height:86px; width:86px; display: block; }  .Image1:hover { background-image:url('Image1_Shadow.jpg'); height:86px; width:86px; display:block; }  .Image2{ background-image:url('Image2_REG.jpg');  height:86px; width:86px; display: block; }  .Image2:hover { background-image:url('Image2_Shadow.jpg'); height:86px; width:86px; display:block; }  .Image3{ background-image:url('Image3_REG.jpg');  height:86px; width:86px; display: block; }  .Image3:hover { background-image:url('Image3_Shadow.jpg'); height:86px; width:86px; display:block; }  #contentDiv{ height:150px; width:350px; left:50px; top:150px; position:absolute; background-color:#452835;}  table { width:600px; height:auto; column-width:200px; left:150px; top:150px; }    <!DOCTYPE html> <html lang="en">   <head>    <link rel="stylesheet" type="text/css" href="newStyle.css"></link>   </head>   <body>   <body>   <table>   <tbody>   <tr><img src="header.jpg" align ="center" /></tr>     <tr>       <td><a class="Image1" href="http://link1" target="_blank"></a> </td>       <td>       <a class="Image2" href="http://link2" target="_blank"></a>       </td>       <td><a class="Image3" href="http://link3" target="_blank"></a></td>     </tr>   </tbody> </table> <div id="contentDetails">Where the hover text is to be displayed</div>  </body> </html> 
           
         
         

Lista de respuestas

2
 
vote

Necesitará un poco de javascript, pero nada que no pueda aprender en media hora. Le aconsejaría leer el mdn js primer Pero solo para comprender cómo funciona JS.

En esencia, debe ubicar el elemento que desea pasar por encima y luego tener múltiples <div> S en su página que contiene su contenido. Agrega un evento de moxes de Javascript en los elementos que desea Coloque la función y en la función de devolución de llamada que le suministra, le dice que oculte todos los DIV y luego muestre solo el div que desee.

Creo que deberías poder trabajar todo desde estas páginas:

  • Cómo obtener un elemento en js
  • Cómo agregar un evento de mouseover
  • Cómo ocultar y mostrar elementos

la mejor de las suertes con ella. Si está atrapado una vez que haya escrito algún código, siéntase libre de editar su pregunta y comentar sobre la mía (para que se vea) y lo intentaré.

 

You'll need a small bit of JavaScript but nothing you can't learn in half an hour. I'd advise you read the MDN JS primer but only to get a grasp for how JS works.

In essence you need to locate the element you want to hover over and then have multiple <div>s on your page containing your content. You add a JavaScript mouseover event on the elements you want to hover over and in the callback function you supply to it you tell it to hide all the divs and then display only the div you want.

I think you should be able to work out everything from these pages:

  • How to get an element in JS
  • How to add a mouseover event
  • How to hide and show elements

Best of luck with it. If you're stuck once you've written some code feel free to edit your question and comment on mine (so I know to take a look) and I'll try help.

 
 
1
 
vote

Aquí hay un ejemplo muy básico que creé que lo ayudará a comenzar:

JS Fiddle: http://jsfiddle.net/dvav1gdo/5/

html

  <div class="module">     <div class="tabs">         <div class="tab">             <img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">         </div>         <div class="tab">             <img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">         </div>         <div class="tab">             <img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">         </div>     </div>     <div class="tab-panels">         <div class="tab-panel active">             <div class="content">                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit unde inventore, aliquam architecto minus minima quis. Aliquid voluptates, dolorum ullam dicta nesciunt molestiae maiores! Ratione quasi officia recusandae laboriosam nihil voluptate perferendis fugiat quae provident aliquam harum id tenetur quisquam, ab repellendus suscipit eligendi temporibus facilis sapiente a veniam voluptatibus quidem in voluptatum vero. Soluta excepturi quisquam, sed, quas rem aperiam atque obcaecati nulla repellendus corporis? Consequatur aut quidem, earum enim asperiores. Libero deserunt dignissimos blanditiis est, repellendus qui molestiae tenetur quas assumenda officiis modi totam, quae ullam. Quaerat officiis tempora molestias voluptatibus sint quo incidunt nostrum quisquam sed excepturi?</p>             </div>         </div>         <div class="tab-panel">             <div class="content">                 <p>Lorem ipsum dolor sit amet.</p>             </div>         </div>         <div class="tab-panel">             <div class="content">                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error fugit harum voluptates. Deserunt adipisci libero incidunt nostrum similique laborum dicta, porro natus harum odit, voluptatum vitae, minima iure omnis. Odit, nemo incidunt voluptas placeat est quis ab dolor. Iure, corporis.</p>             </div>         </div>     </div> </div>   

css

  .tab {     display: inline-block; }  .tab-panel {     display: none;      &.active {         display: block;     } }   

jquery

  $(document).ready(function () {      var $tabs = $('.tab');     var $panels = $('.tab-panel')      // attach js event handler to all tab jQuery objects     $tabs.on('mouseover', function() {         var $this = $(this);         // get hover index         var hindex = $this.index();          // use the active class to show and hide correct panel based on current hover index         $panels.removeClass('active');         $panels.eq(hindex).addClass('active');     }); });   
 

Here's a very basic example I created that will help get you started:

JS Fiddle: http://jsfiddle.net/dvav1gdo/5/

HTML

<div class="module">     <div class="tabs">         <div class="tab">             <img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">         </div>         <div class="tab">             <img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">         </div>         <div class="tab">             <img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">         </div>     </div>     <div class="tab-panels">         <div class="tab-panel active">             <div class="content">                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit unde inventore, aliquam architecto minus minima quis. Aliquid voluptates, dolorum ullam dicta nesciunt molestiae maiores! Ratione quasi officia recusandae laboriosam nihil voluptate perferendis fugiat quae provident aliquam harum id tenetur quisquam, ab repellendus suscipit eligendi temporibus facilis sapiente a veniam voluptatibus quidem in voluptatum vero. Soluta excepturi quisquam, sed, quas rem aperiam atque obcaecati nulla repellendus corporis? Consequatur aut quidem, earum enim asperiores. Libero deserunt dignissimos blanditiis est, repellendus qui molestiae tenetur quas assumenda officiis modi totam, quae ullam. Quaerat officiis tempora molestias voluptatibus sint quo incidunt nostrum quisquam sed excepturi?</p>             </div>         </div>         <div class="tab-panel">             <div class="content">                 <p>Lorem ipsum dolor sit amet.</p>             </div>         </div>         <div class="tab-panel">             <div class="content">                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error fugit harum voluptates. Deserunt adipisci libero incidunt nostrum similique laborum dicta, porro natus harum odit, voluptatum vitae, minima iure omnis. Odit, nemo incidunt voluptas placeat est quis ab dolor. Iure, corporis.</p>             </div>         </div>     </div> </div> 

CSS

.tab {     display: inline-block; }  .tab-panel {     display: none;      &.active {         display: block;     } } 

jQuery

$(document).ready(function () {      var $tabs = $('.tab');     var $panels = $('.tab-panel')      // attach js event handler to all tab jQuery objects     $tabs.on('mouseover', function() {         var $this = $(this);         // get hover index         var hindex = $this.index();          // use the active class to show and hide correct panel based on current hover index         $panels.removeClass('active');         $panels.eq(hindex).addClass('active');     }); }); 
 
 
0
 
vote

Puede usar la función Hover o Hacer clic para detectar la interacción con la imagen, luego use el DIV ID / nombre para cambiar el texto con la consulta, creo que debe ser $("").text("Some info") Ejemplo:

  <div style="height:100px; width:100px" class="title"> //*     first text </div>   

El código que necesita para cambiar el texto en el DIV que su nombre de clase es "title" (consulte Comentario " 9988777667 " arriba):

  $('div.title').text('Some info');   

Ver también para obtener más información "Use jQuery para establecer el valor de DIV TAG":

Use jQuery para establecer el valor de DIV TAG < / p>

enlaces:

http://api.jquery.com/Text/

http://api.jquery.com/hover/

http://api.jquery.com/click/

También puede usar el código de @tanjir como ejemplo:

  $('#img1').hover(function(){      $('#contentDiv').text("content for text 1") };   

recordar que

  <div class="module">     <div class="tabs">         <div class="tab">             <img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">         </div>         <div class="tab">             <img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">         </div>         <div class="tab">             <img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">         </div>     </div>     <div class="tab-panels">         <div class="tab-panel active">             <div class="content">                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit unde inventore, aliquam architecto minus minima quis. Aliquid voluptates, dolorum ullam dicta nesciunt molestiae maiores! Ratione quasi officia recusandae laboriosam nihil voluptate perferendis fugiat quae provident aliquam harum id tenetur quisquam, ab repellendus suscipit eligendi temporibus facilis sapiente a veniam voluptatibus quidem in voluptatum vero. Soluta excepturi quisquam, sed, quas rem aperiam atque obcaecati nulla repellendus corporis? Consequatur aut quidem, earum enim asperiores. Libero deserunt dignissimos blanditiis est, repellendus qui molestiae tenetur quas assumenda officiis modi totam, quae ullam. Quaerat officiis tempora molestias voluptatibus sint quo incidunt nostrum quisquam sed excepturi?</p>             </div>         </div>         <div class="tab-panel">             <div class="content">                 <p>Lorem ipsum dolor sit amet.</p>             </div>         </div>         <div class="tab-panel">             <div class="content">                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error fugit harum voluptates. Deserunt adipisci libero incidunt nostrum similique laborum dicta, porro natus harum odit, voluptatum vitae, minima iure omnis. Odit, nemo incidunt voluptas placeat est quis ab dolor. Iure, corporis.</p>             </div>         </div>     </div> </div> 0  

*** Este ejemplo tiene # en el inicio porque usa el ID del DIV en lugar del nombre de la clase! Así que se vería como:

  <div class="module">     <div class="tabs">         <div class="tab">             <img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">         </div>         <div class="tab">             <img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">         </div>         <div class="tab">             <img style="-webkit-user-select: none;" src="http://dummyimage.com/200x150/000/fff.jpg" width="200" height="150">         </div>     </div>     <div class="tab-panels">         <div class="tab-panel active">             <div class="content">                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit unde inventore, aliquam architecto minus minima quis. Aliquid voluptates, dolorum ullam dicta nesciunt molestiae maiores! Ratione quasi officia recusandae laboriosam nihil voluptate perferendis fugiat quae provident aliquam harum id tenetur quisquam, ab repellendus suscipit eligendi temporibus facilis sapiente a veniam voluptatibus quidem in voluptatum vero. Soluta excepturi quisquam, sed, quas rem aperiam atque obcaecati nulla repellendus corporis? Consequatur aut quidem, earum enim asperiores. Libero deserunt dignissimos blanditiis est, repellendus qui molestiae tenetur quas assumenda officiis modi totam, quae ullam. Quaerat officiis tempora molestias voluptatibus sint quo incidunt nostrum quisquam sed excepturi?</p>             </div>         </div>         <div class="tab-panel">             <div class="content">                 <p>Lorem ipsum dolor sit amet.</p>             </div>         </div>         <div class="tab-panel">             <div class="content">                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error fugit harum voluptates. Deserunt adipisci libero incidunt nostrum similique laborum dicta, porro natus harum odit, voluptatum vitae, minima iure omnis. Odit, nemo incidunt voluptas placeat est quis ab dolor. Iure, corporis.</p>             </div>         </div>     </div> </div> 111  

es un oyente que te espera para flotar, cuando hará el código donde se ejecutará el comentario.

 

You could use the hover or click function to detect interaction with the image then you use the div id/name to change the text with query i believe its should be $("").text("Some info") example:

<div style="height:100px; width:100px" class="title"> //*     first text </div> 

The code that you need in order to change the text in the div which his class name is "title" (SEE comment "//*" above):

$('div.title').text('Some info'); 

Also See for more information "Use jquery to set value of div tag":

Use jquery to set value of div tag

LINKS:

http://api.jquery.com/text/

http://api.jquery.com/hover/

http://api.jquery.com/click/

Also you can use @tanjir 's code as example:

$('#img1').hover(function(){      $('#contentDiv').text("content for text 1") }; 

Remember that

$('#img1'). hover(function(){   // CODE EXECUTE HERE AFTER HOVER OF IMAGE 1 } 

*** this example has # in the start because he use the id of the div instead of the class name! so it would look like:

<div ID="img1"> </div> 

Is a listener that wait you to hover, when you will hover the code where the comment is will execute.

 
 
     
     

Relacionados problema

0  Imagen de fondo Blurs en Firefox3  ( Background image blurs in firefox3 ) 
Cuando uso la imagen en mi página HTML usando la propiedad de fondo. Los loks están bien en IE, pero se ve borroso en Firefox. Wat podría ser la posible soluc...

142  ¿Cómo detectar cuál de las fuentes definidas se utilizó en una página web?  ( How to detect which one of the defined font was used in a web page ) 
Supongamos que tengo la siguiente regla de CSS en mi página: body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ¿Cómo podría detec...

0  Deshacerse del disco en el artículo de la lista  ( Getting rid of disc in list item ) 
Estoy desarrollando un sitio usando jquery, y jquery ui Tabs. Por alguna razón, mis pestañas (lista desordenada) están mostrando sus balas en todos los navega...

4  Cuerda continua que no se envuelve en TD  ( Continuous string not getting wrapped in td ) 
Cuando coloco una larga cadena continua en mi ancho fijo TD, no se está envuelto. La cadena aumenta el ancho de mi mesa. ¿Alguien puede ayudarme con esto? P...

0  LazyWeb: necesita Javascript que elimina los elementos de LI basados ​​en la clase visitada de un elemento  ( Lazyweb need javascript that removes li elements based on visited class of a el ) 
Tengo esta página que tiene muchos datos que no necesito, ya que ya he hecho clic en él, pero se repite a menudo, así que tengo que buscar visualmente el azul...

1  Directrices para diseñar HTML para una fácil personalización CSS  ( Guidelines for designing html for easy css customization ) 
Estoy haciendo un proyecto SAAS, y queremos que cada cliente pueda cargar una página CSS para "su" sitio web. (Aunque en realidad, todos los sitios del client...

303  ¿Por qué el ancho se colapsó en el elemento secundario del ancho porcentual en un padre absolutamente posicionado en Internet Explorer 7?  ( Why did the width collapse in the percentage width child element in an absolutel ) 
Tengo un double8 que contiene varios niños, uno de los cuales es un 99887776669 relativamente posicionado. Cuando uso un Form0 en el niño Form111111 , ...

5  Cómo alinear verticalmente una tabla en CSS  ( How to vertically align a table in css ) 
¿Cómo puedo alinear verticalmente una tabla en el centro de la pantalla con CSS? ...

8  Desapareciendo bordes de células de mesa CSS en navegadores basados ​​en gecko  ( Disappearing css table cell borders in gecko based browsers ) 
Tengo una construcción de tabla HTML muy específica que parece revelar un error de gecko. Aquí hay una versión destilada del problema. Observe la siguiente ...

76  Cómo romper la palabra después de un carácter especial como guiones (-)  ( How to break word after special character like hyphens ) 
Dado un CSS relativamente simple: div { width: 150px; } <div> 12333-2333-233-23339392-332332323 </div> ¿Cómo lo hago para que la cade...




© 2022 respuesta.top Reservados todos los derechos. Centro de preguntas y respuestas reservados todos los derechos