HTML的onclick的字典模式實現

我想實現如下圖所示彈出的一些選定的技術詞義的網頁。我有一個含有csv格式的單詞列表。如何自動爲列表中可用的單詞列表選擇含義？

<!DOCTYPE html> 
<html> 
<head> 
<style> 
.dropbtn { 

} 

.dropbtn:hover, .dropbtn:focus { 
    background-color: #3e8e41; 
} 

.dropdown { 
    position: relative; 
    display: inline-block; 
} 

.dropdown-content { 
    display: none; 
    position: absolute; 
    background-color: #f9f9f9; 
    min-width: 160px; 
    overflow: auto; 
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); 
} 

.dropdown-content a { 
    color: black; 
    padding: 12px 16px; 
    text-decoration: none; 
    display: block; 
} 

.dropdown-content a:hover {background-color: #f1f1f1} 

.show {display:block;} 
</style> 
</head> 
<body> 

<h2></h2> 
<p>Hands-On with <div class="dropdown"> 
<button id="myBtn" class="dropbtn">Ultrahaptics'</button> 
    <div id="myDropdown" class="dropdown-content"> 
    <a href="#home">Feel of touch without wearing devices</a> 

    </div> 
</div> 
gave us a feel of technology of future. 
</p> 

<script> 
// Get the button, and when the user clicks on it, execute myFunction 
document.getElementById("myBtn").onclick = function() {myFunction()}; 

/* myFunction toggles between adding and removing the show class, which is used to hide and show the dropdown content */ 
function myFunction() { 
    document.getElementById("myDropdown").classList.toggle("show"); 
} 

// Close the dropdown if the user clicks outside of it 
window.onclick = function(event) { 
    if (!event.target.matches('.dropbtn')) { 

    var dropdowns = document.getElementsByClassName("dropdown-content"); 
    var i; 
    for (i = 0; i < dropdowns.length; i++) { 
     var openDropdown = dropdowns[i]; 
     if (openDropdown.classList.contains('show')) { 
     openDropdown.classList.remove('show'); 
     } 
    } 
    } 
} 
</script> 

</body> 
</html>

PS：事情是這樣

<a title="Feel of touch without wearing devices">Ultrahaptics'</a>

只適用於鼠標指針，不帶觸摸設備。因此，尋找一種適用於觸控設備的解決方案。

來源

2016-01-23 niko

-1

使用jQuery，這將是一個簡單的例子：

$('.dropbtn').click(function(){ 
    $(this).siblings('.dropdown-content').toggleClass('hide'); 
});

用下面的CSS：

.dropdown-content{ 
    position:absolute; 
    background:#000; 
    color:#fff; 
} 
.hide{ 
    display:none; 
}

而且我已經簡化你的HTML：

<p> 
    Hands-On with 
    <span class="dropdown"> 
    <button type="button" class="dropbtn">Ultrahaptics'</button> 
    <a href="#home" class="dropdown-content hide">Feel of touch without wearing devices</a> 
    </span> 
    gave us a feel of technology of future. 
</p>

你可以在這裏看到它的動作：https://jsfiddle.net/a73t8L4m/

您可能也有興趣使用the dfn tag，但這會使您的HTML看起來有點不同。

來源

2016-01-23 15:49:05 rybo111

即使在這種情況下，我也必須手動更新每一個技術詞的出現。有1000個這樣的事件。我正在尋找自動搜索技術詞彙，並從csv文件中顯示它們的含義。不一定是動態解決方案，即使是靜態解決方案也可以。只要有csv文件或文章中的更新，我就可以運行更新。 – niko

@niko要做的最簡單的事情就是使用像MySQL這樣的數據庫來存儲數據，並使用像PHP這樣的語言來顯示它。 – rybo111

@niko也，你的問題開始提到CSS。你所要求的與CSS無關。 – rybo111

我可以看到你使用的JavaScript。我會推薦使用jQuery-CSV

這將幫助您閱讀使用JavaScript的csv。你可以訪問這個鏈接，因爲這與你的問題有些相關。 Evans Answer

來源

2016-01-26 08:31:36

HTML的onclick的字典模式實現

回答

相關問題