请问在C#中tabpage控件中动态添加一些单选按钮后，如何让他们不重叠在一起

你得指定CheckBox的初始位置,向下面一样

private void button1_Click(object sender, EventArgs e)

{

CheckBox checkBox1 = new CheckBox()

CheckBox checkBox2 = new CheckBox()

CheckBox checkBox3 = new CheckBox()

checkBox1.Text = "AA"

checkBox2.Text = "BB"

checkBox3.Text = "CC"

tabControl1.TabPages[0].Controls.Add(checkBox1)

tabControl1.TabPages[0].Controls.Add(checkBox2)

tabControl1.TabPages[0].Controls.Add(checkBox3)

checkBox1.Location = new Point(50, 20)

checkBox2.Location = new Point(50, 50)

checkBox3.Location = new Point(50, 80)

}

先给出示例html代码

<div>

<!-- Nav tabs -->

<ul class="nav nav-tabs" role="tablist" id="contentnavid">

<li role="presentation" class="active"><a href="#tab1" aria-controls="tab1" role="tab" data-toggle="tab">tab1</a></li>

<li role="presentation"><a href="#tab2" aria-controls="tab2" role="tab" data-toggle="tab">tab2</a></li>

<li role="presentation"><a href="#tab3" aria-controls="tab3" role="tab" data-toggle="tab">tab3</a></li>

<li role="presentation" id="closetabli"><a href="#closetab" aria-controls="closetab" role="tab" data-toggle="tab"><span>closetab</span>

<button type="button" class="close" aria-label="Close" id="closetabbtn"><span aria-hidden="true" style="color:red">×</span></button>

</a></li>

</ul>

<!-- Tab panes -->

<div class="tab-content">

<div role="tabpanel" class="tab-pane active" id="tab1">this is tab1</div>

<div role="tabpanel" class="tab-pane active" id="tab2">this is tab2</div>

<div role="tabpanel" class="tab-pane active" id="tab3">this is tab3</div>

<div role="tabpanel" class="tab-pane active" id="closetab">this is closetab</div>

</div>

</div>

上面的html代码中，显示的导航组件有4个tab页，其中最后一个tab页的标签的右边有一个 x 的关闭按钮。

下面我们要实现就是当点击x关闭按钮时，可以把这个带关闭按钮的tab隐藏掉，并显示最近一次显示的tab页。

具体示例代码如下：

<script>

var activeTab = "tab1"//当前的tab页。默认为第一个tab页。

var previousTab //上一个打开的tab页。默认为空。

$(function(){

//实现事件响应函数，当tab页被显示时会触发

$(‘a[data-toggle="tab"]‘).on(‘shown.bs.tab‘, function (e) {

//获取当前被显示的tab页标签的aria-controls属性值

activeTab = $(e.target).attr("aria-controls")

//获取前一个被显示的tab页标签的aria-controls属性值

previousTab = $(e.relatedTarget).attr("aria-controls")

})

//点击带关闭按钮tab页标签上的x后的响应事件

$("#closetabbtn").click(function(e){

$(this).parent().parent().css("display","none")//隐藏tab头，调用remove方法就是删除了

$("#closetab").css("display","none")//隐藏tab正文信息，调用remove方法就是删除了

if(activeTab=="closetab"){ //判断当前tab页是否是带关闭按钮的tab页，如果是，则显示上次打开的tab页

$(‘#contentnavid a[href="#‘+previousTab+‘"]‘).tab(‘show‘)//显示tab页

}

return false//一定要return false，阻止事件往上冒泡

})

})

</script>

上面给出了js代码。

本文给出了最核心的处理逻辑，其中关键的地方有：

1）增加关闭按钮，并处理click事件

2）处理tab的show事件

在此基础上，可以实现各种场景下的应用。

---