web开发中如何实现选项卡功能

dnmyg2003 2010-08-16 08:39:19

我的开发环境是.net2005 想在网站中加一个类似于选项卡的页面,不知道如何实现?
请大侠们指教.

...全文

267 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

zccmy22 2010-08-31

打赏
举报

其实，后来里面有一个相当不错的继于jquery的框架。

easyui

几个js文件和相关的样式，引到页面上，直接后台输出json数据，

前台通过ajax指定数据源，你所要的结果就出现了。

比较容易。其它的，较复杂，待定。

qinggeer 2010-08-27

打赏
举报

[Quote=引用 1 楼 silence_smile 的回复:]
各种JS框架的Tab插件
试试jQuery UIhttp://docs.jquery.com/UI
[/Quote]

http://paranimage.com/37/
是啊，这样的js 插件蛮多的。简单好用的就是jquery 的了。
当然你也可以用ajax 控件中的tab 选项卡啊　
AJAX TabContainer控件

零点逸族 2010-08-27

打赏
举报

我本来也是想去用那些所有的Tab控件的，但是想一下，没必要为了这个功能去加载那些JS，具体的效果你可以到
http://tv.ijie.com/vote
查看。

零点逸族 2010-08-27

打赏
举报

其实不需要去找什么控件的，你自己去写的话也是很简单的。



<ul class="ijieTV-guest-switch">

	<li id="guest_0" class="switch-on">王筝</li>

	<li id="guest_1" class="switch-off">周思敏夫妇</li>

	<li id="guest_2" class="switch-off">李晓磊</li>

	<li id="guest_3" class="switch-off">张二丹</li>

</ul>

<div id="content_guest_0" class="ijieTV-guest-content" style="display:"></div>

<div id="content_guest_1" class="ijieTV-guest-content" style="display:none"></div>

<div id="content_guest_2" class="ijieTV-guest-content" style="display:none"></div>

<div id="content_guest_3" class="ijieTV-guest-content" style="display:none"></div>

对应的javascript处理代码：



var guestTabs = $(".ijieTV-guest-switch").children();

guestTabs.bind("click", function() {

	// Set all tabs off.

	guestTabs.removeClass();

	guestTabs.addClass("switch-off");

	// Set all tabs content off.

	$(".ijieTV-guest-content").css("display", "none");

	// Set this tab and content display.

	$(this).removeClass("switch-off");

	$(this).addClass("switch-on");

	$("#content_" + this.id).css("display", "");

});