之前在給別人做POC的時候，有開發過一個類似于Tab標簽形式的WebPart，給大家分享一下。

具體的樣式如下：

下面來說一下具體的實現思路：

在前臺的時候定義三個div，然后通過Jquery來控制每一個div的顯示和隱藏（具體的也可以到網上搜索一些Tab的效果樣式，然后自己按著自己的方式修改一下就好了）。

前臺代碼:

Code 1 <div > 2 <div id="btn1" class="tab-box-btn active" ref="content1">本日</div> 3 <div id="btn2" class="tab-box-btn" ref="content2">本周</div> 4 <div id="btn3" class="tab-box-btn" ref="content3">本月</div> 5 <div style="clear:both"></div> 6 </div>

說明:
ref="content1" 中的content1也是一個div，這個div就是我們看到的下面展示數據的那個部分(在這里定義數據展示控件,并在后臺給其綁定數據)。其他也是一樣的。

后臺代碼:

Code 1 using System; 2 using System.Collections.Generic; 3 using System.Linq; 4 using System.Web; 5 using System.Data; 6 using System.Web.UI; 7 using System.Web.UI.WebControls; 8 9 namespace POC.Tab 10 { 11 public partial class _Default : System.Web.UI.Page 12 { 13 protected void Page_Load(object sender, EventArgs e) 14 { 15 // 在這里進行數據的綁定 16 } 17 18 /// <summary> 19 /// 本日 數據 20 /// </summary> 21 /// <returns></returns> 22 private DataTable GetBRData(string p_value) 23 { 24 DataTable p_dt = new DataTable(); 25 p_dt.Columns.Add("ImageUrl"); 26 p_dt.Columns.Add("DataTitleUrl"); 27 p_dt.Columns.Add("DataContent"); 28 p_dt.Columns.Add("FullContent"); 29 30 for (int i = 0; i <= 4;i++) 31 { 32 DataRow p_dr = p_dt.NewRow(); 33 p_dr["ImageUrl"] = "Img/sz.PNG"; 34 p_dr["DataTitleUrl"] = p_value + i.ToString(); 35 p_dr["DataContent"] = p_value + i.ToString(); 36 p_dr["FullContent"] = p_value + i.ToString(); 37 p_dt.Rows.Add(p_dr); 38 } 39 return p_dt; 40 } 41 } 42 }

到此我們工作就做完了，如果一切都沒有問題話，我們將會看到上面那樣的一個效果，當然樣式的話我們可以讓美工來進行調的好看一點，在這里只是想給大家一個實現的思路....畢竟思路很重要不是....

轉載于:https://www.cnblogs.com/yx-bolg/archive/2012/08/11/2626938.html

總結

以上是生活随笔為你收集整理的SharePoint中Tab方式进行内容展现的WebPart的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。