javascript - 像在 digital ocean 中一样选择按钮

Question

<分区>

Answer 1

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

您可以将内容添加到每个 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>