選擇像數字海洋中的按鈕

Question

有人知道js/css庫或關鍵字是如何被調用的？我搜索了一會兒像數字海洋這個按鈕選擇元素，見圖片:-) 我在哪裏可以點擊，他們得到了選擇等等，我認爲這是相當不錯的

Answer 1

第一所有這不是一個按鈕。它可以是一個簡單的div或列表元素。這是一個示例代碼。

您可以將內容添加到每個li元素中以模擬所需的列表。您也可以使用div或`span'來達到同樣的目的。

$(".button-container li").click(function(){ 
 
\t \t \t console.log("list"); 
 
\t \t \t $(this).addClass("selected").siblings().removeClass("selected"); 
 
});

.button-container li { 
 
    list-style-type: none; 
 
    display: inline-block; 
 
    width: 150px; 
 
    border: 2px solid #f1f1f1; 
 
    border-radius:5px; 
 
    min-height: 100px; 
 
    margin: 0px; 
 
    box-sizing: border-box; 
 
    font-size: 1.3em; 
 
    text-align: center; 
 
    vertical-align: top; 
 
    position:relative; 
 
    margin:10px; 
 
} 
 

 
li.selected 
 
     { 
 
      background:#4183D7; 
 
      color:white; 
 
      border:2px solid #4183D7; 
 
     } 
 
span 
 
{ 
 
    display:block; 
 
    color:#444; 
 
    height:30px; 
 
    width:100%; 
 
    background:white; 
 
    font-size:10px; 
 
    position:absolute; 
 
    bottom:0px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul class="button-container"> 
 
    <li>some content 
 
    <span> 
 
    Some other content 
 
    </span> 
 
    </li> 
 
    <li>some content 
 
    <span> 
 
    Some other content 
 
    </span> 
 
    </li> 
 
    <li>some content 
 
    <span> 
 
    Some other content 
 
    </span> 
 
    </li> 
 
    <li>some content 
 
    <span> 
 
    Some other content 
 
    </span> 
 
    </li> 
 
    <li>some content 
 
    <span> 
 
    Some other content 
 
    </span> 
 
    </li> 
 
    
 
</ul>