與intro.js相關的問題集中在HTML表格格式

Question

讓我們覺得上面的圖像作爲典型的HTML表格。 Intro.js根據數據步驟幫助重點關注。

我的表是根據foreach循環生成的。

我在想，如果有可能把重點放在表列類似的圖像，而不是專注於<td>或<tr>

任何幫助將是真正的好。

Answer 1

有一個功能需求在：https://github.com/usablica/intro.js/issues/57所以我會說可以安全地說你不能這樣做。

你可以做的是創建一個虛擬的透明div與position: absolute並設置的位置和大小通過JavaScript，然後高亮這一點。

看看這裏：https://jsfiddle.net/s848n5hs/2/

$('tr:first-child td').each(function(i) { 
    $('.col' + (i + 1) + '_intro') 
     .addClass('intro_div') 
     .css('top', $(this).offset().top) 
     .css('left', $(this).offset().left) 
     .css('width', $(this).outerWidth()) 
     .css('height', $(this).closest('table').height()) 
}) 

introJs().start();