jQuery svg实现tab选项卡切换效果



65 258 87



特效描述:jQuery svg实现 tab选项卡 切换效果,jQuery svg实现tab选项卡切换效果

代码结构

1. 引入CSS

<link data-style="theme_public" rel="stylesheet" type="text/css" href="css/zhiling.css">

2. 引入JS

<script type="text/javascript" src="js/tab.js"></script>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script type="text/javascript" src="js/jquery.nicescroll.js"></script>

3. HTML代码

<div class="zl">
	<!--选项卡开始-->
	<div id="Tab1">
		<div class="Menubox tab1 menu_top">
			<ul>
				<li id="one1" onclick="setTab('one',1,3)" class="hover">多基金指令</li>
				<li id="one2" onclick="setTab('one',2,3)">组合指令</li>
				<li id="one3" onclick="setTab('one',3,3)">指令管理</li>
			</ul>
		</div>
		<div class="Contentbox">
			<div id="con_one_1">
				<div class="con-div">
					<div class="con-one-left">
						<div class="number number-jijin">
							<div class="search search-jijin">
								<input type="text" class="input_w borderRed input_w-jijin" placeholder="请输入股票代码" title="请输入股票代码" required="">
							</div>
							<div class="gpname gpname-jijin">恒生电子</div>
						</div>
						<div class="table_num">
							<div class="hq-Title  title_hq">
								<h2 class="zl_title">行情信息</h2>
							</div>
							<div class="jijin-table1 qihuo-table">
								<table cellspacing="0" cellpadding="0" border="0" width="100%">
									<tbody>
										<tr>
											<td class="textL ">卖&nbsp;&nbsp;&nbsp;出:</td>
											<td class="textR jijin-red">3231.65</td>
										</tr>
										<tr>
											<td class="textL">买&nbsp;&nbsp;&nbsp;入:</td>
											<td class="textR jijin-red">3231.00</td>
										</tr>
										<tr>
											<td class="textL">最&nbsp;&nbsp;&nbsp;新:</td>
											<td class="textR ">3231.70</td>
										</tr>
										<tr>
											<td class="textL">最&nbsp;&nbsp;&nbsp;低:</td>
											<td class="textR">2231.70</td>
										</tr>
										<tr>
											<td class="textL">均&nbsp;&nbsp;&nbsp;价:</td>
											<td class="textR">2231.70</td>
										</tr>
										<tr>
											<td class="textL">涨&nbsp;&nbsp;&nbsp;停:</td>
											<td class="textR jijin-red">2231.70</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div class="jijin-table2 qihuo-table">
								<table cellspacing="0" cellpadding="0" border="0" width="100%">
									<tbody>
										<tr>
											<td class="textL jijin-green">1</td>
											<td class="textR"></td>
										</tr>
										<tr>
											<td class="textL jijin-green">9</td>
											<td class="textR"></td>
										</tr>
										<tr>
											<td class="textL">涨&nbsp;&nbsp;&nbsp;跌:</td>
											<td class="textR">35/0.15%</td>
										</tr>
										<tr>
											<td class="textL">最&nbsp;&nbsp;&nbsp;高:</td>
											<td class="textR jijin-red">3213.70</td>
										</tr>
										<tr>
											<td class="textL">基&nbsp;&nbsp;&nbsp;差:</td>
											<td class="textR">-61.48</td>
										</tr>
										<tr>
											<td class="textL jijin-green">跌&nbsp;&nbsp;&nbsp;停:</td>
											<td class="textR jijin-green">234.69</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div class="clr"></div>
						</div>
						<div class="pan-buyell">
							<div class="hq-Title  title_hq">
								<h2 class="zl_title">合约信息</h2>
							</div>
							<div class="heyue">
								<table cellspacing="0" cellpadding="0" border="0" width="100%">
									<tbody>
										<tr>
											<td class="textL">合约乘数:</td>
											<td class="textR jijin-red">300</td>
											<td class="textR qiho-width"></td>
										</tr>
										<tr>
											<td class="textL jijin-green">最后交易日:</td>
											<td class="textR">2016/1/20</td>
											<td class="textR qiho-width"></td>
										</tr>
										<tr>
											<td class="textL">最后交割日:</td>
											<td class="textR">2016/1/20</td>
											<td class="textR qiho-width"></td>
										</tr>
									</tbody>
								</table>
							</div>
							<div class="clr"></div>
						</div>
					</div>
					<div class="con-one-right">
						<div class="Title  title_zl">
							<h2 class="zl_title">组合选择</h2>
						</div>
						<div class="right-div">
							<ul class="table-thead-right">
								<li class="duoxuan-div">
									<input type="checkbox" id="checkbox_a1" class="chk_1" checked />
									<label for="checkbox_a1"></label>
								</li>
								<li>基金</li>
								<li>组合</li>
								<li>当前数量</li>
								<li>可卖量</li>
								<li>指令方向</li>
								<li class="textR">分单比例</li>
								<li class="textC">指令数量</li>
								<li class="textR">指令金额</li>
								<li class="textC">目标权重</li>
							</ul>
							<div class="right-div1 sucai">
								<ul class="table-info-right">
									<li class="duoxuan-div">
										<input type="checkbox" id="checkbox_a2" class="chk_1" />
										<label for="checkbox_a2"></label>
									</li>
									<li class="textC padding-L5" style="width: 21.4%;">已选合计</li>
									<li class="textC">317,000</li>
									<li class="textC">组合1</li>
									<li class="textC font-none">null</li>
									<li class="textR font-gray">12.5%</li>
									<li class="textC jijin-red font-none">买入</li>
									<li class="textC font-none">null</li>
									<li class="textC font-none">全成</li>
								</ul>
								<ul class="table-info-right">
									<li class="duoxuan-div">
										<input type="checkbox" id="checkbox_a3" class="chk_1" />
										<label for="checkbox_a3"></label>
									</li>
									<li class="textC padding-L5">基金1号</li>
									<li class="textC">组合1</li>
									<li class="textC">132,000</li>
									<li class="textC">88200</li>
									<li class="textC font-none">null</li>
									<li class="textR font-gray">12.5%</li>
									<li class="textC jijin-red font-none">买入</li>
									<li class="textC font-none">null</li>
									<li class="textC font-none">全成</li>
								</ul>
								<ul class="table-info-right">
									<li class="duoxuan-div">
										<input type="checkbox" id="checkbox_a4" class="chk_1" />
										<label for="checkbox_a4"></label>
									</li>
									<li class="textC padding-L5 font-none">null</li>
									<li class="textC">组合2</li>
									<li class="textC">132,000</li>
									<li class="textC">88200</li>
									<li class="textC font-none">null</li>
									<li class="textR font-gray">12.5%</li>
									<li class="textC jijin-red font-none">买入</li>
									<li class="textC font-none">null</li>
									<li class="textC font-none">全成</li>
								</ul>
								<ul class="table-info-right">
									<li class="duoxuan-div">
										<input type="checkbox" id="checkbox_a5" class="chk_1" />
										<label for="checkbox_a5"></label>
									</li>
									<li class="textC padding-L5">基金1号</li>
									<li class="textC">组合1</li>
									<li class="textC">132,000</li>
									<li class="textC">88200</li>
									<li class="textC font-none">null</li>
									<li class="textR font-gray">12.5%</li>
									<li class="textC jijin-red font-none">买入</li>
									<li class="textC font-none">null</li>
									<li class="textC font-none">全成</li>
								</ul>
								<ul class="table-info-right">
									<li class="duoxuan-div">
										<input type="checkbox" id="checkbox_a6" class="chk_1" />
										<label for="checkbox_a6"></label>
									</li>
									<li class="textC padding-L5 font-none">null</li>
									<li class="textC">组合2</li>
									<li class="textC">132,000</li>
									<li class="textC">88200</li>
									<li class="textC font-none">null</li>
									<li class="textR font-gray">12.5%</li>
									<li class="textC jijin-red font-none">买入</li>
									<li class="textC font-none">null</li>
									<li class="textC font-none">全成</li>
								</ul>
								<ul class="table-info-right">
									<li class="duoxuan-div">
										<input type="checkbox" id="checkbox_a7" class="chk_1" />
										<label for="checkbox_a7"></label>
									</li>
									<li class="textC padding-L5">基金1号</li>
									<li class="textC">组合1</li>
									<li class="textC">132,000</li>
									<li class="textC">88200</li>
									<li class="textC font-none">null</li>
									<li class="textR font-gray">12.5%</li>
									<li class="textC jijin-red font-none">买入</li>
									<li class="textC font-none">null</li>
									<li class="textC font-none">全成</li>
								</ul>
								<ul class="table-info-right">
									<li class="duoxuan-div">
										<input type="checkbox" id="checkbox_a8" class="chk_1" />
										<label for="checkbox_a8"></label>
									</li>
									<li class="textC padding-L5 font-none">null</li>
									<li class="textC">组合2</li>
									<li class="textC">132,000</li>
									<li class="textC">88200</li>
									<li class="textC font-none">null</li>
									<li class="textR font-gray">12.5%</li>
									<li class="textC jijin-red font-none">买入</li>
									<li class="textC font-none">null</li>
									<li class="textC font-none">全成</li>
								</ul>
								<ul class="table-info-right">
									<li class="duoxuan-div">
										<input type="checkbox" id="checkbox_a9" class="chk_1" />
										<label for="checkbox_a9"></label>
									</li>
									<li class="textC padding-L5">基金2号</li>
									<li class="textC">组合1</li>
									<li class="textC">132,000</li>
									<li class="textC">88200</li>
									<li class="textC font-none">null</li>
									<li class="textR font-gray">12.5%</li>
									<li class="textC jijin-red font-none">买入</li>
									<li class="textC font-none">null</li>
									<li class="textC font-none">全成</li>
								</ul>
								<ul class="table-info-right">
									<li class="duoxuan-div">
										<input type="checkbox" id="checkbox_a10" class="chk_1" />
										<label for="checkbox_a10"></label>
									</li>
									<li class="textC padding-L5 font-none">
										<input type="checkbox" id="checkbox_a11" class="chk_1" />
										<label for="checkbox_a11"></label>
									</li>
									<li class="textC">组合2</li>
									<li class="textC">132,000</li>
									<li class="textC">88200</li>
									<li class="textC font-none">null</li>
									<li class="textR font-gray">12.5%</li>
									<li class="textC jijin-red font-none">买入</li>
									<li class="textC font-none">null</li>
									<li class="textC font-none">全成</li>
								</ul>
								<ul class="table-info-right">
									<li class="duoxuan-div">
										<input type="checkbox" id="checkbox_a14" class="chk_1" />
										<label for="checkbox_a14"></label>
									</li>
									<li class="textC padding-L5">基金3号</li>
									<li class="textC">组合1</li>
									<li class="textC">132,000</li>
									<li class="textC">88200</li>
									<li class="textC font-none">null</li>
									<li class="textR font-gray">12.5%</li>
									<li class="textC jijin-red font-none">买入</li>
									<li class="textC font-none">null</li>
									<li class="textC font-none">全成</li>
								</ul>
								<ul class="table-info-right">
									<li class="duoxuan-div">
										<input type="checkbox" id="checkbox_a12" class="chk_1" />
										<label for="checkbox_a12"></label>
									</li>
									<li class="textC padding-L5 font-none">null</li>
									<li class="textC">组合2</li>
									<li class="textC">132,000</li>
									<li class="textC">88200</li>
									<li class="textC font-none">null</li>
									<li class="textR font-gray">12.5%</li>
									<li class="textC jijin-red font-none">买入</li>
									<li class="textC font-none">null</li>
									<li class="textC font-none">全成</li>
								</ul>
								<ul class="table-info-right">
									<li class="duoxuan-div">
										<input type="checkbox" id="checkbox_a13" class="chk_1" />
										<label for="checkbox_a13"></label>
									</li>
									<li class="textC padding-L5">基金4号</li>
									<li class="textC">组合1</li>
									<li class="textC">132,000</li>
									<li class="textC">88200</li>
									<li class="textC font-none">null</li>
									<li class="textR font-gray">12.5%</li>
									<li class="textC jijin-red font-none">买入</li>
									<li class="textC font-none">null</li>
									<li class="textC font-none">全成</li>
								</ul>
								<ul class="table-info-right">
									<li class="duoxuan-div">
										<input type="checkbox" id="checkbox_a15" class="chk_1" />
										<label for="checkbox_a15"></label>
									</li>
									<li class="textC padding-L5 font-none">null</li>
									<li class="textC">组合2</li>
									<li class="textC">132,000</li>
									<li class="textC">88200</li>
									<li class="textC font-none">null</li>
									<li class="textR font-gray">12.5%</li>
									<li class="textC jijin-red font-none">买入</li>
									<li class="textC font-none">null</li>
									<li class="textC font-none">全成</li>
								</ul>
								<ul class="table-info-right">
									<li class="duoxuan-div">
										<input type="checkbox" id="checkbox_a16" class="chk_1" />
										<label for="checkbox_a16"></label>
									</li>
									<li class="textC padding-L5">基金5号</li>
									<li class="textC">组合1</li>
									<li class="textC">132,000</li>
									<li class="textC">88200</li>
									<li class="textC font-none">null</li>
									<li class="textR font-gray">12.5%</li>
									<li class="textC jijin-red font-none">买入</li>
									<li class="textC font-none">null</li>
									<li class="textC font-none">全成</li>
								</ul>
								<ul class="table-info-right">
									<li class="duoxuan-div font-none">null</li>
									<li class="textC padding-L5 font-none">null</li>
									<li class="textC">组合2</li>
									<li class="textC">132,000</li>
									<li class="textC">88200</li>
									<li class="textC font-none">null</li>
									<li class="textR font-gray">12.5%</li>
									<li class="textC jijin-red font-none">买入</li>
									<li class="textC font-none">null</li>
									<li class="textC font-none">全成</li>
								</ul>
								<div class="clr"></div>
							</div>
						</div>
					</div>
					<div class="clr"></div>
				</div>
				<div class="div-bot">
					<div class="buysell-tab">
						<div id="Tab2" class="Tab2">
							<div class="Menubox mairuchu qihuo menu_right menu_right-jijin mairuchu-1">
								<ul>
									<li class="hover" onclick="setTab('two',1,4)" id="two1">买开</li>
									<li class="" onclick="setTab('two',2,4)" id="two2">买平</li>
									<li class="" onclick="setTab('two',3,4)" id="two3">卖开</li>
									<li class="" onclick="setTab('two',4,4)" id="two4">卖平</li>
								</ul>
								<div class="zc-icon8 zc-bgimg qihuo-s" style="width:5%!important; float: right;">
									<ul class="shezhi-xial">
										<li class="sanjian">三键下单</li>
										<li class="chuantong">传统下单</li>
									</ul>
								</div>
							</div>
							<div class="Contentbox">
								<!--买开开始-->
								<div class="mairu-jijin" id="con_two_1">
									<table cellspacing="0" cellpadding="0" border="0" width="100%">
										<tbody>
											<tr>
												<th>投资类型:</th>
												<td>
													<div class="btn_1 btn_22 btnR btnactive">投机</div>
													<div class="btn_1 btn_22 btnR">保值</div>
												</td>
											</tr>
											<tr>
												<th>价格模式:</th>
												<td>
													<div class="btn_1 btn_22 btnR btnactive">全天市价</div>
													<div class="btn_1 btn_22 btnR">优于现价</div>
												</td>
											</tr>
											<tr>
												<th>指令价格:
												</th>
												<td colspan="3">
													<input type="text" disabled="true " class="zl_bor zl_bor_1 grayBG" id="textfield2" name="textfield2"> 元
												</td>
											</tr>
											<tr>
												<th>指令数量:
												</th>
												<td colspan="3">
													<input type="text" class="zl_bor zl_bor_1 whiteBG" id="textfield2" name="textfield2"> 元
												</td>
											</tr>
											<tr>
												<tr>
													<th>分单方式:</th>
													<td>
														<div class="btn_1 btn_22 btnR btnactive">平均分配</div>
														<div class="btn_1 btn_11 btnR">按可用金额分配</div>
														<div class="btn_1 btnR btn_22">自定义</div>
													</td>
												</tr>
										</tbody>
									</table>
									<ul class="redbtn redbtn-jijin btnred ">
										<li>计算</li>
										<li>计算风险</li>
										<li>确认</li>
										<li class="cancel">取消</li>
										<div class="clr"></div>
									</ul>
								</div>
								<!--买开结束-->
								<!--买平开始-->
								<div style="display:none" class="maichu-jijin" id="con_two_2">
									<table cellspacing="0" cellpadding="0" border="0" width="100%">
										<tbody>
											<tr>
												<th>投资类型:</th>
												<td>
													<div class="btn_1 btn_22 btnR btnactive">投机</div>
													<div class="btn_1 btn_22 btnR">保值</div>
												</td>
											</tr>
											<tr>
												<th>价格模式:</th>
												<td>
													<div class="btn_1 btn_22 btnR btnactive">全天市价</div>
													<div class="btn_1 btn_22 btnR">优于现价</div>
												</td>
											</tr>
											<tr>
												<th>指令价格:
												</th>
												<td colspan="3">
													<input type="text" disabled="true " class="zl_bor zl_bor_1 grayBG" id="textfield2" name="textfield2"> 元
												</td>
											</tr>
											<tr>
												<th>指令数量:
												</th>
												<td colspan="3">
													<input type="text" class="zl_bor zl_bor_1 whiteBG" id="textfield2" name="textfield2"> 元
												</td>
											</tr>
											<tr>
												<tr>
													<th>分单方式:</th>
													<td>
														<div class="btn_1 btn_22 btnR btnactive">平均分配</div>
														<div class="btn_1 btn_11 btnR">按可用金额分配</div>
														<div class="btn_1 btnR btn_22">自定义</div>
													</td>
												</tr>
										</tbody>
									</table>
									<ul class="redbtn redbtn-jijin btnred ">
										<li>计算</li>
										<li>计算风险</li>
										<li>确认</li>
										<li class="cancel">取消</li>
									</ul>
								</div>
								<!--买平结束-->
								<!--卖开开始-->
								<div style="display:none" class="maichu-jijin" id="con_two_3">
									<table cellspacing="0" cellpadding="0" border="0" width="100%">
										<tbody>
											<tr>
												<th>投资类型:</th>
												<td>
													<div class="btn_1 btn_22 btnG btnGactive">投机</div>
													<div class="btn_1 btn_22 btnG">保值</div>
												</td>
											</tr>
											<tr>
												<th>投资类型:</th>
												<td>
													<div class="btn_1 btn_22 btnG btnGactive">全天市价</div>
													<div class="btn_1 btn_22 btnG">优于限价</div>
												</td>
											</tr>
											<tr>
												<th>指令价格:
												</th>
												<td colspan="3">
													<input type="text" disabled="true " class="zl_bor zl_bor_1 grayBG" id="textfield2" name="textfield2"> 元
												</td>
											</tr>
											<tr>
												<th>指令数量:
												</th>
												<td colspan="3">
													<input type="text" class="zl_bor zl_bor_1 whiteBG" id="textfield2" name="textfield2"> 元
												</td>
											</tr>
											<tr>
												<th>分单方式:</th>
												<td>
													<div class="btn_1 btn_22 btnG btnGactive">平均分配</div>
													<div class="btn_1 btn_11 btnG">按可用金额分配</div>
													<div class="btn_1 btnG btn_22">自定义</div>
												</td>
											</tr>
										</tbody>
									</table>
									<ul class="redbtn redbtn-jijin btngre">
										<li>计算</li>
										<li>计算风险</li>
										<li>确认</li>
										<li class="cancel">取消</li>
									</ul>
								</div>
								<!--卖开结束-->
								<!--卖平开始-->
								<div style="display:none" class="maichu-jijin" id="con_two_4">
									<table cellspacing="0" cellpadding="0" border="0" width="100%">
										<tbody>
											<tr>
												<th>投资类型:</th>
												<td>
													<div class="btn_1 btn_22 btnG btnGactive">投机</div>
													<div class="btn_1 btn_22 btnG">保值</div>
												</td>
											</tr>
											<tr>
												<th>投资类型:</th>
												<td>
													<div class="btn_1 btn_22 btnG btnGactive">全天市价</div>
													<div class="btn_1 btn_22 btnG">优于限价</div>
												</td>
											</tr>
											<tr>
												<th>指令价格:
												</th>
												<td colspan="3">
													<input type="text" disabled="true " class="zl_bor zl_bor_1 grayBG" id="textfield2" name="textfield2"> 元
												</td>
											</tr>
											<tr>
												<th>指令数量:
												</th>
												<td colspan="3">
													<input type="text" class="zl_bor zl_bor_1 whiteBG" id="textfield2" name="textfield2"> 元
												</td>
											</tr>
											<tr>
												<th>分单方式:</th>
												<td>
													<div class="btn_1 btn_22 btnG btnGactive">平均分配</div>
													<div class="btn_1 btn_11 btnG">按可用金额分配</div>
													<div class="btn_1 btnG btn_22">自定义</div>
												</td>
											</tr>
										</tbody>
									</table>
									<ul class="redbtn redbtn-jijin btngre">
										<li>计算</li>
										<li>计算风险</li>
										<li>确认</li>
										<li class="cancel">取消</li>
									</ul>
								</div>
								<!--卖平结束-->
							</div>
						</div>
						<div id="Tab3" class="Tab3" style="display: none;">
							<div class="Menubox mairuchu qihuo-pc menu_right menu_right-jijin mairuchu-1">
								<ul>
									<li class="hover" onclick="setTab('three',1,3)" id="three1">买开</li>
									<li class="" onclick="setTab('three',2,3)" id="three2">卖开</li>
									<li class="" onclick="setTab('three',3,3)" id="three3">平仓</li>
								</ul>
								<div class="zc-icon8 zc-bgimg qihuo-s" style="width:5%!important; float: right;">
									<ul class="shezhi-xial">
										<li class="sanjian">三键下单</li>
										<li class="chuantong">传统下单</li>
									</ul>
								</div>
							</div>
							<div class="Contentbox">
								<!--买开开始-->
								<div class="mairu-jijin" id="con_three_1">
									<table cellspacing="0" cellpadding="0" border="0" width="100%">
										<tbody>
											<tr>
												<th>投资类型:</th>
												<td>
													<div class="btn_1 btn_22 btnR btnactive">投机</div>
													<div class="btn_1 btn_22 btnR">保值</div>
												</td>
											</tr>
											<tr>
												<th>价格模式:</th>
												<td>
													<div class="btn_1 btn_22 btnR btnactive">全天市价</div>
													<div class="btn_1 btn_22 btnR">优于现价</div>
												</td>
											</tr>
											<tr>
												<th>指令价格:
												</th>
												<td colspan="3">
													<input type="text" disabled="true " class="zl_bor zl_bor_1 grayBG" id="textfield2" name="textfield2"> 元
												</td>
											</tr>
											<tr>
												<th>指令数量:
												</th>
												<td colspan="3">
													<input type="text" class="zl_bor zl_bor_1 whiteBG" id="textfield2" name="textfield2"> 元
												</td>
											</tr>
											<tr>
												<tr>
													<th>分单方式:</th>
													<td>
														<div class="btn_1 btn_22 btnR btnactive">平均分配</div>
														<div class="btn_1 btn_11 btnR">按可用金额分配</div>
														<div class="btn_1 btnR btn_22">自定义</div>
													</td>
												</tr>
										</tbody>
									</table>
									<ul class="redbtn redbtn-jijin btnred ">
										<li>计算</li>
										<li>计算风险</li>
										<li>确认</li>
										<li class="cancel">取消</li>
										<div class="clr"></div>
									</ul>
								</div>
								<!--买开结束-->
								<!--卖开开始-->
								<div style="display:none" class="maichu-jijin" id="con_three_2">
									<table cellspacing="0" cellpadding="0" border="0" width="100%">
										<tbody>
											<tr>
												<th>投资类型:</th>
												<td>
													<div class="btn_1 btn_22 btnG btnGactive">投机</div>
													<div class="btn_1 btn_22 btnG">保值</div>
												</td>
											</tr>
											<tr>
												<th>价格模式:</th>
												<td>
													<div class="btn_1 btn_22 btnG btnGactive">全天市价</div>
													<div class="btn_1 btn_22 btnG">优于现价</div>
												</td>
											</tr>
											<tr>
												<th>指令价格:
												</th>
												<td colspan="3">
													<input type="text" disabled="true " class="zl_bor zl_bor_1 grayBG" id="textfield2" name="textfield2"> 元
												</td>
											</tr>
											<tr>
												<th>指令数量:
												</th>
												<td colspan="3">
													<input type="text" class="zl_bor zl_bor_1 whiteBG" id="textfield2" name="textfield2"> 元
												</td>
											</tr>
											<tr>
												<tr>
													<th>分单方式:</th>
													<td>
														<div class="btn_1 btn_22 btnG btnGactive">平均分配</div>
														<div class="btn_1 btn_11 btnG">按可用金额分配</div>
														<div class="btn_1 btnG btn_22">自定义</div>
													</td>
												</tr>
										</tbody>
									</table>
									<ul class="redbtn redbtn-jijin btngre ">
										<li>计算</li>
										<li>计算风险</li>
										<li>确认</li>
										<li class="cancel">取消</li>
									</ul>
								</div>
								<!--卖开结束-->
								<!--平仓开始-->
								<div style="display:none" class="maichu-jijin" id="con_three_3">
									<table cellspacing="0" cellpadding="0" border="0" width="100%">
										<tbody>
											<tr>
												<th>投资类型:</th>
												<td>
													<div class="btn_1 btn_22 btnBlue btnBactive">投机</div>
													<div class="btn_1 btn_22 btnBlue">保值</div>
												</td>
											</tr>
											<tr>
												<th>投资类型:</th>
												<td>
													<div class="btn_1 btn_22 btnBlue btnBactive">全天市价</div>
													<div class="btn_1 btn_22 btnBlue">优于限价</div>
												</td>
											</tr>
											<tr>
												<th>指令价格:
												</th>
												<td colspan="3">
													<input type="text" disabled="true " class="zl_bor zl_bor_1 grayBG" id="textfield2" name="textfield2"> 元
												</td>
											</tr>
											<tr>
												<th>指令数量:
												</th>
												<td colspan="3">
													<input type="text" class="zl_bor zl_bor_1 whiteBG" id="textfield2" name="textfield2"> 元
												</td>
											</tr>
											<tr>
												<th>分单方式:</th>
												<td>
													<div class="btn_1 btn_22 btnBlue btnBactive">平均分配</div>
													<div class="btn_1 btn_11 btnBlue">按可用金额分配</div>
													<div class="btn_1 btnBlue btn_22">自定义</div>
												</td>
											</tr>
										</tbody>
									</table>
									<ul class="redbtn redbtn-jijin btnblu">
										<li>计算</li>
										<li>计算风险</li>
										<li>确认</li>
										<li class="cancel">取消</li>
									</ul>
								</div>
								<!--平仓结束-->
							</div>
						</div>
					</div>
					<div class="buysell-table">
						<div id="Tab4">
							<div class="Menubox all_undo ">
								<ul class="Title  title_zl-2">
									<li id="four1" onclick="setTab('four',1,2)" class="hover">多基金指令</li>
									<li id="four2" onclick="setTab('four',2,2)" class="">全部指令</li>
									<li class="all_undo all_cx">全部撤销</li>
								</ul>
							</div>
							<div class="Contentbox">
								<!--多基金指令开始-->
								<div id="con_four_1" class="mairu-jijin nopadding" style="display: block;">
									<div class="table_list">
										<ul class="table-thead-qihuo">
											<li>下达时间</li>
											<li>基金</li>
											<li>组合</li>
											<li>证券代码</li>
											<li>证券简称</li>
											<li>指令方向</li>
											<li>指令金额</li>
											<li>指令状态</li>
											<li>进度</li>
											<li>指令序号</li>
											<li>结束时间</li>
											<li>操作</li>
										</ul>
										<div tabindex="5000" style="overflow: hidden;" class="div-overflow sucai">
											<ul class="table-info-qihuo">
												<li class="textC">11:11:00</li>
												<li class="textC">基金1号</li>
												<li class="textC">组合1</li>
												<li class="textC font-gray">600570</li>
												<li class="textC font-gray">恒生电子</li>
												<li class="textC jijin-red">买入</li>
												<li class="textR">210,000</li>
												<li class="textC">全成</li>
												<li class="textC">
													<div class="jindu-num">80000/10000</div>
													<div class="jindu1" style="position: relative;">
														<div class="jindu2" style="position: absolute;"></div>
													</div>
												</li>
												<li class="textC font-gray">2016021606</li>
												<li class="textC">13:26</li>
												<li class="textC">
													<span class="cexiao">撤销</span>
												</li>
											</ul>
											<ul class="table-info-qihuo">
												<li class="textC">11:11:00</li>
												<li class="textC">恒生1号基金</li>
												<li class="textC">资产单元1</li>
												<li class="textC font-gray">000001</li>
												<li class="textC font-gray">平安银行</li>
												<li class="textC all_green">卖出</li>
												<li class="textR">11.91</li>
												<li class="textC">部成</li>
												<li class="textC">
													<div class="jindu-num">80000/10000</div>
													<div class="jindu1" style="position: relative;">
														<div class="jindu2" style="position: absolute;"></div>
													</div>
												</li>
												<li class="textC font-gray">20151316001</li>
												<li class="textC">--</li>
												<li class="textC">
													<span class="cexiao">--</span>
												</li>
											</ul>
											<ul class="table-info-qihuo">
												<li class="textC">11:11:00</li>
												<li class="textC">恒生1号基金</li>
												<li class="textC">资产单元1</li>
												<li class="textC font-gray">000001</li>
												<li class="textC font-gray">平安银行</li>
												<li class="textC all_green">卖出</li>
												<li class="textR">11.91</li>
												<li class="textC">部成</li>
												<li class="textC">
													<div class="jindu-num">80000/10000</div>
													<div class="jindu1" style="position: relative;">
														<div class="jindu2" style="position: absolute;"></div>
													</div>
												</li>
												<li class="textC font-gray">20151316001</li>
												<li class="textC">--</li>
												<li class="textC">
													<span class="cexiao">--</span>
												</li>
												<ul class="table-info div2">
													<li class="textC font-none">Kong</li>
													<li class="textC font-none">Kong</li>
													<li class="textC font-none">Kong</li>
													<li class="textC font-gray">000001</li>
													<li class="textC font-gray">平安银行</li>
													<li class="textC all_green">卖出</li>
													<li class="textR">11.91</li>
													<li class="textC">部成</li>
													<li class="textC">
														<div class="jindu-num">80000/10000</div>
														<div class="jindu1" style="position: relative;">
															<div class="jindu2" style="position: absolute;"></div>
														</div>
													</li>
													<li class="textC font-gray">20151316001</li>
													<li class="textC">--</li>
													<li class="textC">
														<span class="cexiao">--</span>
													</li>
												</ul>
											</ul>
											<ul class="table-info-qihuo">
												<li class="textC">11:11:00</li>
												<li class="textC">恒生1号基金</li>
												<li class="textC">资产单元1</li>
												<li class="textC font-gray">000001</li>
												<li class="textC font-gray">平安银行</li>
												<li class="textC all_green">卖出</li>
												<li class="textR">11.91</li>
												<li class="textC">部成</li>
												<li class="textC">
													<div class="jindu-num">80000/10000</div>
													<div class="jindu1" style="position: relative;">
														<div class="jindu2" style="position: absolute;"></div>
													</div>
												</li>
												<li class="textC font-gray">20151316001</li>
												<li class="textC">--</li>
												<li class="textC">
													<span class="cexiao">--</span>
												</li>
												<ul class="table-info div1">
													<li class="textC font-none">Kong</li>
													<li class="textC font-none">Kong</li>
													<li class="textC font-none">Kong</li>
													<li class="textC font-gray">000001</li>
													<li class="textC font-gray">平安银行</li>
													<li class="textC all_green">卖出</li>
													<li class="textR">11.91</li>
													<li class="textC">部成</li>
													<li class="textC">
														<div class="jindu-num">80000/10000</div>
														<div class="jindu1" style="position: relative;">
															<div class="jindu2" style="position: absolute;"></div>
														</div>
													</li>
													<li class="textC font-gray">20151316001</li>
													<li class="textC">--</li>
													<li class="textC">
														<span class="cexiao">--</span>
													</li>
												</ul>
											</ul>
										</div>
									</div>
									<div class="clr"></div>
								</div>
								<!--多基金指令结束-->
								<!--全部基金开始-->
								<div id="con_four_2" class="maichu-jijin nopadding" style="display: none;">
									<div id="con_four_1" class="mairu-jijin nopadding">
										<div class="table_list">
											<ul class="table-thead">
												<li>指令类型</li>
												<li>下达时间</li>
												<li>基金</li>
												<li>组合</li>
												<li>证券代码</li>
												<li>证券简称</li>
												<li>指令方向</li>
												<li>指令金额</li>
												<li>指令状态</li>
												<li>进度</li>
												<li>指令序号</li>
												<li>结束时间</li>
												<li>操作</li>
											</ul>
											<div tabindex="5000" style="overflow: hidden;" class="div-overflow sucai">
												<ul class="table-info">
													<li class="textC padding-L5">个劵指令</li>
													<li class="textC">11:11:00</li>
													<li class="textC">基金1号</li>
													<li class="textC">组合1</li>
													<li class="textC font-gray">600570</li>
													<li class="textC font-gray">恒生电子</li>
													<li class="textC jijin-red">买入</li>
													<li class="textR">210,000</li>
													<li class="textC">全成</li>
													<li class="textC">
														<div class="jindu-num">80000/10000</div>
														<div class="jindu1" style="position: relative;">
															<div class="jindu2" style="position: absolute;"></div>
														</div>
													</li>
													<li class="textC font-gray">2016021606</li>
													<li class="textC">13:26</li>
													<li class="textC">
														<span class="cexiao">撤销</span>
													</li>
												</ul>
												<ul class="table-info">
													<li class="textC padding-L5">组合指令1</li>
													<li class="textC">11:11:00</li>
													<li class="textC">恒生1号基金</li>
													<li class="textC">资产单元1</li>
													<li class="textC font-gray">000001</li>
													<li class="textC font-gray">平安银行</li>
													<li class="textC all_green">卖出</li>
													<li class="textR">11.91</li>
													<li class="textC">部成</li>
													<li class="textC">
														<div class="jindu-num">80000/10000</div>
														<div class="jindu1" style="position: relative;">
															<div class="jindu2" style="position: absolute;"></div>
														</div>
													</li>
													<li class="textC font-gray">20151316001</li>
													<li class="textC">--</li>
													<li class="textC">
														<span class="cexiao">--</span>
													</li>
												</ul>
												<ul class="table-info">
													<li class="textC padding-L5 button1">组合指令2</li>
													<li class="textC">11:11:00</li>
													<li class="textC">恒生1号基金</li>
													<li class="textC">资产单元1</li>
													<li class="textC font-gray">000001</li>
													<li class="textC font-gray">平安银行</li>
													<li class="textC all_green">卖出</li>
													<li class="textR">11.91</li>
													<li class="textC">部成</li>
													<li class="textC">
														<div class="jindu-num">80000/10000</div>
														<div class="jindu1" style="position: relative;">
															<div class="jindu2" style="position: absolute;"></div>
														</div>
													</li>
													<li class="textC font-gray">20151316001</li>
													<li class="textC">--</li>
													<li class="textC">
														<span class="cexiao">--</span>
													</li>
													<ul class="table-info div2">
														<li class="textC font-none">Kong</li>
														<li class="textC font-none">Kong</li>
														<li class="textC font-none">Kong</li>
														<li class="textC font-none">Kong</li>
														<li class="textC font-gray">000001</li>
														<li class="textC font-gray">平安银行</li>
														<li class="textC all_green">卖出</li>
														<li class="textR">11.91</li>
														<li class="textC">部成</li>
														<li class="textC">
															<div class="jindu-num">80000/10000</div>
															<div class="jindu1" style="position: relative;">
																<div class="jindu2" style="position: absolute;"></div>
															</div>
														</li>
														<li class="textC font-gray">20151316001</li>
														<li class="textC">--</li>
														<li class="textC">
															<span class="cexiao">--</span>
														</li>
													</ul>
												</ul>
												<ul class="table-info">
													<li class="textC padding-L5 button"><i class=""></i>组合指令3</li>
													<li class="textC">11:11:00</li>
													<li class="textC">恒生1号基金</li>
													<li class="textC">资产单元1</li>
													<li class="textC font-gray">000001</li>
													<li class="textC font-gray">平安银行</li>
													<li class="textC all_green">卖出</li>
													<li class="textR">11.91</li>
													<li class="textC">部成</li>
													<li class="textC">
														<div class="jindu-num">80000/10000</div>
														<div class="jindu1" style="position: relative;">
															<div class="jindu2" style="position: absolute;"></div>
														</div>
													</li>
													<li class="textC font-gray">20151316001</li>
													<li class="textC">--</li>
													<li class="textC">
														<span class="cexiao">--</span>
													</li>
													<ul class="table-info div1">
														<li class="textC font-none">Kong</li>
														<li class="textC font-none">Kong</li>
														<li class="textC font-none">Kong</li>
														<li class="textC font-none">Kong</li>
														<li class="textC font-gray">000001</li>
														<li class="textC font-gray">平安银行</li>
														<li class="textC all_green">卖出</li>
														<li class="textR">11.91</li>
														<li class="textC">部成</li>
														<li class="textC">
															<div class="jindu-num">80000/10000</div>
															<div class="jindu1" style="position: relative;">
																<div class="jindu2" style="position: absolute;"></div>
															</div>
														</li>
														<li class="textC font-gray">20151316001</li>
														<li class="textC">--</li>
														<li class="textC">
															<span class="cexiao">--</span>
														</li>
													</ul>
												</ul>
											</div>
										</div>
									</div>
									<!--全部基金结束-->
								</div>
							</div>
						</div>
					</div>
					<div class="clr"></div>
				</div>
				<div class="clr"></div>
			</div>
		</div>
		<div id="con_one_2" style="display:none">组合指令</div>
		<div id="con_one_3" style="display:none">指令管理</div>
	</div>
</div>
<!--选项卡结束-->
</div>
<script type="text/javascript" src="js/jquery.nicescroll.js"></script>
<script type="text/javascript">
	//加载滚动条样式
	$(".sucai").niceScroll({
		cursorcolor: "#d3d3d3",
		cursoropacitymax: 1,
		touchbehavior: false,
		cursorwidth: "10px",
		cursorborder: "0",
		hidecursordelay: 0,
		cursorborderradius: "5px",
		nativeparentscrolling: false,
		autohidemode: false
	});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 切换按钮 表单 表单美化 表单插件 表单美化插件 文本框 text文本框 文字切换 文字选项卡 复选框 复选按钮 复选框美化 选项卡自动切换 列表切换 翻页切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到