-1
A
回答
2
第一所有這不是一個按鈕。它可以是一個簡單的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>
相關問題
- 1. RabbitMQ數字海洋集羣
- 2. SSL僞造,CloudFlare的和數字海洋
- 3. Django數字海洋液滴的錯誤
- 4. sailsjs安裝在數字海洋ubuntu vps
- 5. Angular-cli數字海洋部署
- 6. 遠程git回購數字海洋ubuntu
- 7. CI與Gitlab和數字海洋
- 8. 數字海洋MongoDB連接錯誤
- 9. 實施SSL(數字海洋+ Nginx + Cloudflare)
- 10. dokku sass數字海洋錯誤
- 11. Django staticfiles 404部署到數字海洋
- 12. SSL進行dokku和數字海洋
- 13. Nginx與Ubuntu和Rails數字海洋
- 14. 部署Rails應用到數字海洋
- 15. 運行按鈕缺少藍色的海洋管道
- 16. 監事一個數字海洋泊塢窗圖像上
- 17. 如何知道在數字海洋中傳輸的數據量
- 18. 海洋2010.1與VS2010
- 19. ios的海洋航海圖API
- 20. 在海洋中獲取海鯉的表面數據
- 21. 如何從數字海洋上的本地存儲庫中提取圖像
- 22. Laravel在異常處理程序中的數字海洋錯誤
- 23. Odoo數字海洋中的外發郵件服務器
- 24. 掩蔽海洋上的插值數據
- 25. getfromLocation返回海洋或海域名稱
- 26. 無法在目錄中寫入 - 數字海洋
- 27. rake db:在數字海洋和設計中遷移錯誤
- 28. 如何在數字海洋中設置ALLOWED_HOSTS
- 29. 如何在數字海洋液滴中安裝BeautifulSoup?
- 30. 海洋單元測試
有大量的按鈕樣式庫在那裏。我不確定數字海洋是否正在使用它,或者如果他們自己定製編碼。使用Google Developers Tools面板查看這些元素的HTML和CSS樣式。像這樣的東西很容易做,除非你對CSS和HTML不熟悉。如果你是,我認爲你應該花時間通過檢查員分析他們的代碼來自己編寫代碼。如果你一般不瞭解底下發生了什麼,依賴圖書館將會使你成爲一個較弱的開發者。 – Brett84c