將內容加載到div

我正在嘗試創建一個頁面，其中包含用戶將鼠標懸停在同一頁面上的圖像。到目前爲止，我已經創建了html文件和樣式表。這是一個相當簡單的基於表格的頁面，其中三個圖像具有css懸停效果，並鏈接到三個不同的頁面。我的挑戰是弄清楚如何將內容加載到div中。我對Javascript完全陌生，所以這將是我想象中的學習曲線，但任何幫助將被讚賞。我附上了一張圖片來說明我正在嘗試做什麼。謝謝大家 ![page description ]將內容加載到div

更新的問題。感謝您爲每個人輸入。（返回從假期 - 將去在建議）

我的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>

來源

2015-11-24 Princess Toadstool

請發表一點你的代碼向我們展示你現在所擁有的。 –

如果您使用jquery只綁定懸停事件和'jquery $ .load'將html的內容放入div。這對你來說太容易了。 –

如果您使用的是jquery，$（'＃img1'）。 hover（function（）{$（'＃contentDiv'）。text（「content for text 1」）}; – tanjir

你需要JavaScript的一個小一點，但什麼你不能在半小時內學會。我建議你閱讀MDN JS primer，但只能瞭解JS如何工作。

實質上，您需要找到要懸停的元素，然後在包含您的內容的頁面上有多個<div>。您在要懸停的元素上添加JavaScript mouseover event，並在您向其提供的回調函數中添加JavaScript mouseover event，您告訴它隱藏所有div，然後僅顯示所需的div。

我想你應該可以從這些頁面摸出一切：

祝您好運與它的。如果你在編寫代碼時遇到困難，可以自由編輯你的問題並發表評論（所以我知道去看看），我會盡力幫助你。

來源

2015-11-24 20:29:55 thelastshadow

您可以使用懸停或點擊功能檢測與當時使用DIV ID /名稱更改與查詢我相信文字圖像交互其應$("").text("Some info") 例如：

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

代碼你爲了改變在他的類名是"title"股利文本需要（見註釋「//*」以上）：

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

而且有關詳情請參閱「使用jQuery設置的值div標籤「：

Use jquery to set value of div tag

鏈接：

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

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

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

您也可以使用@tanjir的代碼，例如：

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

記住

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

***這個例子中具有＃的開始，因爲他使用div的ID，而不是類名的！所以它看起來像：

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

是一個偵聽器，等待您懸停，當您將代碼懸停在評論將執行的代碼。

來源

2015-11-24 20:30:28

對不起，聲音如此丟失，但我試圖放入我的代碼，但是，似乎有一個字符數限制。在那附近？ –

只需編輯您的問題，並將代碼放在問題的末尾，並標記我的名字，如'@DeBanana' –

請記住，在您發送代碼以標記它並選擇{}圖標 –

這裏是一個非常簡單的例子，我創建，這將幫助你開始：

JS小提琴： 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'); 
    }); 
});

來源

2015-11-24 20:40:38

將內容加載到div

回答

相關問題