jQuery股票基金交易多個選項卡tab切換效果



112 445 149



特效描述:股票基金切換 多個選項卡 tab切換效果,(不兼容IE876)多基金指令(單個頁面多個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

加群請備注:從官網了解到

老夫子电子