<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>jquery tab</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style type="text/css">
.ui-tabs-nav{
font-size:14px;
margin:0px;
padding:0px 0px 0px 0px;/*26为图片的高度*/
}
*+html .ui-tabs-nav{padding:0px 0px 26px 0px;} /* IE7 */
.ui-tabs-nav li{
display:inline;
}
.ui-tabs-nav a{
float:left;
background:url(images/btn_p_bg1.gif) no-repeat left top;
margin: 1px 0 0;
color:#ffffff;
text-align:center;
text-decoration:none;
}
.ui-tabs-nav a span{
width: 110px; /* IE 6 treats width as min-width */
min-width: 110px;
height: 26px; /* IE 6 treats height as min-height */
min-height: 26px;
padding:6px 0 0 0;
}
.ui-tabs-nav .ui-tabs-selected a{
background:url(images/btn_p_bg2.gif) no-repeat right top;
color:#FF7C12;
}
.ui-tabs-nav .ui-tabs-disabled a{
opacity: .4;
filter: alpha(opacity=40);
}
.ui-tabs-hide{
display:none;
}
.ui-tabs-panel {
border: 1px solid #d2d2d2;
padding: 1em 8px;
background: #fff; /* declare background color for container to avoid distorted fonts in IE while fading */
}
</style>
<script src="<%=path%>/js/jquery-latest.js" type="text/javascript" ></script>
<script src="<%=path%>/js/tab/ui.core.js" type="text/javascript" ></script>
<script src="<%=path%>/js/tab/ui.tabs.js" type="text/javascript" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#searchTab > ul").tabs({
event: 'mouseover',
spinner:'',
fxAutoHeight: true,
selected: 0
});
});
function searchSubmit(){
var keyWordOne = $("#keyWordOne").val();
$("input[type='radio'][name='type']").each(
function(i){
var typeVal = $(this).val();//alert(this.value);
$("#searchTab > ul").tabs('url', i, "<%=path%>/go.action?type="+typeVal+"&keyWordOne="+keyWordOne);
if($(this).is(':checked'))
$("#searchTab > ul").tabs('select',i);
}
);
}
</script>
</head>
<body>
<div>
<table width="96%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="532">
<input type="radio" name="type" value="1" />
明星
<input type="radio" name="type" value="2" />
观众
<input type="radio" name="type" value="3" />
评委
<input type="radio" name="type" value="4" />
作品
</td>
<s:if test="#parameters.keyWordOne==null">
<s:if test="%{keyWordOne==null}">
<s:set name="keyWordOne" value="" />
</s:if>
<s:else><s:set name="keyWordOne" value="%{keyWordOne}" /></s:else>
</s:if>
<s:else>
<s:set name="keyWordOne" value="#parameters.keyWordOne" />
</s:else>
<td width="323"><input type="text" id="keyWordOne" name="keyWordOne" value="<s:property value="#keyWordOne" />" /></td>
<td width="95"><a href="#" onclick="javascript:searchSubmit();" ><img src="<%=path%>/images/btn_search2.gif" border=0 /></a></td>
</tr>
</table>
</div>
<div id="searchTab" >
<ul>
<li><a id="starTab" href="#fragment-1"><span>明星</span></a></li>
<li><a id="audienceTab" href="#fragment-2"><span>观众</span></a></li>
<li><a id="commentatorTab" href="#fragment-3"><span>评委</span></a></li>
<li><a id="workTab" href="#fragment-4"><span>作品</span></a></li>
</ul>
</div>
<div id="fragment-1">明星</div>
<div id="fragment-2">观众</div>
<div id="fragment-3">评委</div>
<div id="fragment-4">作品</div>
</body>
</html>
分享到:
- 2009-02-24 22:42
- 浏览 1516
- 评论(0)
- 论坛回复 / 浏览 (0 / 2246)
- 查看更多
相关推荐
jQuery tab标签控制图片选项卡切换效果
结合jQuery实现的焦点图特效,左侧TAB控制的垂直滚动的网页图片展示特效,左侧点击后,右侧图片分批次更换显示,右侧只显示缩略图,不能被放大显示。这种形式以前本站也分享过几款,不过本效果看上去更漂亮一些,...
jquery tab带缩略图片选项卡左右按钮控制焦点图片滚动切换 jquery tab带缩略图片选项卡左右按钮控制焦点图片滚动切换 jquery tab带缩略图片选项卡左右按钮控制焦点图片滚动切换
通过jquery控制tab,支持多个tab共存。
jquery tab易迅网焦点图片全屏滑动切换支持按钮控制图片...
jQuery标签TAB控制图片切换代码.zip
jQuery右侧tab标签控制图片切换特效是一款设计在幻灯片轮播图右侧的文字标签选项卡菜单,点击选项卡标签控制图片切换。
这是一款美观实用的jQuery页面滚动顶部固定tab选项卡切换代码,新闻列表导航选项卡切换插件。
jquery tab步骤选项卡是一款可以通过按钮或者代码控制选项卡,类似导航菜单的风格,可以制作成向导类导航。 jquery tab步骤选项卡特效图:
jQuery TAB Slide 网页选项卡与图片切换的结合效果,鼠标放在大图片上的时候,图片向上缩小,同时显示出TAB菜单,鼠标悬停于TAB菜单时,该TAB背景色变化,实际上是将焦点图的手动控制按钮做了TAB的样式,还挺别致哦...
jQuery标签TAB控制图片切换代码是一款设计在右侧tab标签菜单,点击控制图片选项卡切换。
jQuery右侧tab标签控制图片切换特效是一款设计在幻灯片轮播图右侧的文字标签选项卡菜单,点击选项卡标签控制图片切换。 js代码 [removed][removed] [removed]jQuery(".m-slide").slide({ titCell:".tab li", ...
2 mouseover事件, 还有就是关键的css样式编写,控制显示的样式, 代码如下: <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.0 Transitional//EN”> <HTML> <HEAD> <TITLE>tab </TITLE> &...
今天我们要来分享一款非常实用的jQuery Tab菜单切换插件,它可以在商品分组显示中使用,并且是图文结合的,比如各大网上商城的产品推荐等。当我们将鼠标滑过Tab选项卡时,既可以将该Tab的内容激活,是一款非常不错的...
jQuery扁平水平滑动Tab选项卡:jQuery扁平水平滑动Tab选项卡是一款基于jQuery实现的支持键盘控制的扁平风格水平滑动Tab选项卡切换特效
jQuery标签TAB控制图片切换代码是一款设计在右侧tab标签菜单,点击控制图片选项卡切换。
jquery图标控制选项卡切换代码是一款横向选项卡切换特效,鼠标滑过切换显示。
jQuery 控制网页整屏横向、垂直滚动切换,意思是,它与Tab大体上类似,但是TAB只控制某个Division标签,这一个控制的是整个网页,点击页面询问的序号,当前网页会滚动出去,然后第二屏滚动进来,形成连贯的滚屏效果...
jquery图片滚动制作一个带有选项卡切换滚动效果且带有左右按钮控制的图片左右滚动焦点图。