选择数字海洋中的按钮

Question

有人知道js / css库，或关键字如何调用？我正在寻找像数字海洋那样的按钮选择元素，见图片:-) 在哪里我可以点击，他们被选中等等，我认为这是非常好的

Answer 1

首先，它不是一个按钮。它可以是一个简单的div或list元素。这是一个示例代码。

您可以将内容添加到每个li元素中，以模拟所需的列表。您也可以将div或“span”用于相同目的。

$(".button-container li").click(function(){
			console.log("list");
			$(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>