在页面加载时隐藏菜单，需要在单击超链接时填充
Hide a menu on page load and need to populate on click of hyperlink
我已经将我的代码粘贴到 http://jsfiddle.net/2YDPn/
我面临的问题是我在选项卡中有一个搜索页面，单击搜索时会显示结果。
但是当我们点击时 结果 ，它应该在新选项卡中打开详细信息结果。
最初，我隐藏了选项卡详细信息。 和 onlick 我正在重置类并调用div 类来显示内容。但未设置新选项卡的焦点。
请在这个问题上指导我。代码也粘贴在下面
<%@ include file="common-includeCMTT.jsp"%>
<%
String language = request.getLocale().toString();
ResourceBundle bundle;
if (session.getAttribute("lang") != null) {
language = (String)session.getAttribute("lang");
}
if (language.length()>2){
language=language.substring(0,2);
}
Locale locale = new Locale(language);
session.setAttribute("LocaleObject", locale);
bundle = ResourceBundle.getBundle("MessageResources", locale);
String jsFileName = (language.equals("en")) ? "messages.js" : "messages_"+language+".js";
%>
<html>
<head>
<link rel="stylesheet" type="text/css" href="compo.css" />
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="common.js"></script>
<script type="text/javascript" src="js/jquery.tablesorter.min.js" charset="utf-8"></script>
<script type="text/javascript" src="js/sortable-tables.js" charset="utf-8"></script>
<script type="text/javascript" src="js/tabs-2.js"></script>
<title>Circuit Search Page</title>
<style type="text/css">
.toggle_class
{
display:none;
}
</style>
<script type="text/javascript">
function check(fieldname)
{
if (/[^0-9A-Z]/gi.test(fieldname.value))
{
alert ("Please enter an alphanumeric value");
fieldname.value = "";
fieldname.focus();
return false;
}
}
function valForm(evt) {
var form = document.circuitForm;
if (form.usid.value != null && form.usid.value != "") {
quickSearch('usid', form.usid.value);
}
else{
alert("Please enter a valid USID");
}
}
function circuit() {
document.getElementById("circuit_reference").style.display = "inline";
document.getElementById("usid").style.display = "none";
document.getElementById("router_name").style.display = "none";
document.getElementById("euclid").style.display = "none";
}
function usid1() {
document.getElementById("circuit_reference").style.display = "none";
document.getElementById("usid").style.display = "inline";
document.getElementById("router_name").style.display = "none";
document.getElementById("euclid").style.display = "none";
}
function router() {
document.getElementById("circuit_reference").style.display = "none";
document.getElementById("usid").style.display = "none";
document.getElementById("router_name").style.display = "inline";
document.getElementById("euclid").style.display = "none";
}
function euclid1() {
document.getElementById("circuit_reference").style.display = "none";
document.getElementById("usid").style.display = "none";
document.getElementById("router_name").style.display = "none";
document.getElementById("euclid").style.display = "inline";
}
function popupDetailsEvent(submitEvent,value)
{
var url="circuitDetailsMain.do?event_type="+submitEvent+"&euclid="+value;
var title="CIRCUIT_DETAILS";
var submittedEvent = 'CIRCUIT_DETAILS_EVENT';
if(submitEvent == submittedEvent)
{
var newWindow = window.open(url, title, 'scrollbars=yes,resizable=yes, width=1000,height=700 ');
if (window.focus) { newWindow.focus(); }
//return false;
}
}
function displayDetails(link)
{
alert("hasgdhas");
//window.open(link,'_self');
document.getElementById("tab1").className = "";
document.getElementById("tab1").className = "tabpanel-tabbar-item";
document.getElementById("tab2").className = "";
document.getElementById("tab2").className = "tabpanel-tabbar-item tab_active";
//$('#content01').hide();
$('#content02').show();
//document.getElementById("content01").style.display="none";
// document.getElementById("content02").style.display="block";
// alert("tab1::::::::::"+document.getElementById("tab1").className);
// alert("tab2::::::::::"+document.getElementById("tab2").className);
}
</script>
<body class="COMPO">
<html:form method="POST" action="circuitSearchMain">
<div id="tabpanel-demo" class="tab_panel_2 clear">
<ul id="tabpanel-liste" class="tab_menu clear">
<li id="tab1" class="tabpanel-tabbar-item tab_active"><a href="#content01" class="tabpanel-tabbar-link">Search</a></li>
<li id="tab2" class="tabpanel-tabbar-item toggle_class"><a href="#content02" class="tabpanel-tabbar-link">Details</a></li>
</ul>
<div id="content01" class="tab_panel_content_2 " style="height: 450px; width: 990px;">
<center>
<br>
<h2 class="title_n1_orange">Circuit Search</h2>
<ul>
<li>Please enter one of the search parameters.</li>
</ul>
<br> <input name="radioButton" type="radio"
value="Circuit_Reference" onclick="circuit();" /> Circuit Reference
<input id="circuit_reference" onblur="check(this)" type="text" name="cctRef"
style="display: none" /><span style="margin-right: 50px;"></span> <input
name="radioButton" type="radio" value="USID" onclick="usid1();" />
USID <input id="usid" onblur="check(this)" type="text" name="usid" style="display: none" /><span
style="margin-right: 50px;"></span> <input name="radioButton"
type="radio" value="Router_Name" onclick="router();" /> Router Name
<input id="router_name" onblur="check(this)" type="text" name="routerName"
style="display: none" /><span style="margin-right: 50px;"></span> <input
name="radioButton" type="radio" value="Backbone_cct_reference"
onclick="euclid1();" /> Backbone Circuit Reference <input
id="euclid" onblur="check(this)" type="text" name="backboneCctRef" style="display: none" />
<br> <br>
<button type="button" class="button_action_large" title='Search'
onclick="javascript:valForm('SEARCH_EVENT');">
<span>Search</span>
</button>
<button type="button" class="button_action_large" title='Reset'
onclick="submitEvent('RESET_EVENT');">
<span>Reset</span>
</button>
<br> <br>
<logic:present name="circuitForm" property="circuitInfo">
<table class="sortable" id="id_unique" summary="Tables title" border="1" cellpadding="0" cellspacing="0">
<thead>
<tr >
<th scope="col" class="table_header first" abbr="EUCLID column (unsorted)"><a href="#">EUCLID</a></th>
<th scope="col" class="table_header" abbr="USID column (unsorted)"><a href="#">USID</a></th>
<th scope="col" class="table_header" abbr="ROUTER NAME column (unsorted)"><a href="#">ROUTER NAME</a></th>
<th scope="col" class="table_header" abbr="CIRCUIT ID column (unsorted)"><a href="#">CIRCUIT ID</a></th>
<th scope="col" class="table_header" abbr="CUSTOMER NAME column (unsorted)"><a href="#">CUSTOMER NAME</a></th>
<th scope="col" class="table_header" abbr="CUSTOMER CODE column (unsorted)"><a href="#">CUSTOMER CODE</a></th>
<th scope="col" class="table_header" abbr="CUSTOMER STATUS column (unsorted)"><a href="#">CUSTOMER STATUS</a></th>
<th scope="col" class="table_header" abbr="COUNTRY column (unsorted)"><a href="#">COUNTRY</a></th>
</tr>
</thead>
<tbody>
<logic:iterate id="result" name="circuitForm" property="circuitInfo" type="com.equant.cmt.domain.business.Circuit">
<tr>
<%if(result.getEuclid()!=null && !result.getEuclid().equals("")){%>
<td class="quantity_data"><a href="#" onclick="displayDetails();"><bean:write name="result" property="euclid"/></a></td>
<%}else{%>
<td class="quantity_data"> </td>
<%}%>
<%if(result.getUsid()!=null && !result.getUsid().equals("")){%>
<td class="quantity_data"><bean:write name="result" property="usid"/></td>
<%}else{%>
<td class="quantity_data"> </td>
<%}%>
<%if(result.getRouterName()!=null && !result.getRouterName().equals("")){%>
<td class="quantity_data"><bean:write name="result" property="routerName"/></td>
<%}else{%>
<td class="quantity_data"> </td>
<%}%>
<%if(result.getCircuitId()!=null && !result.getCircuitId().equals("")){%>
<td class="quantity_data"><bean:write name="result" property="circuitId"/></td>
<%}else{%>
<td class="quantity_data"> </td>
<%}%>
<%if(result.getCountryName()!=null && !result.getCountryName().equals("")){%>
<td class="quantity_data"><bean:write name="result" property="customerName"/></td>
<%}else{%>
<td class="quantity_data"> </td>
<%}%>
<%if(result.getCustomerCode()!=null && !result.getCustomerCode().equals("")){%>
<td class="quantity_data"><bean:write name="result" property="customerCode"/></td>
<%}else{%>
<td class="quantity_data"> </td>
<%}%>
<%if(result.getCustomerStatus()!=null && !result.getCustomerStatus().equals("")){%>
<td class="quantity_data"><bean:write name="result" property="customerStatus"/></td>
<%}else{%>
<td class="quantity_data"> </td>
<%}%>
<%if(result.getCountryName()!=null && !result.getCountryName().equals("")){%>
<td class="quantity_data"><bean:write name="result" property="countryName"/></td>
<%}else{%>
<td class="quantity_data"> </td>
<%}%>
</tr>
</logic:iterate>
</tbody>
</table>
</logic:present>
</center>
</div>
<div id="content02" class="tab_panel_content_2" style="height: 450px; width: 990px;">
hgvhjghj
</div>
</div>
</html:form>
</body>
</html>
这里有一些代码片段可以帮助您指明正确的方向。
.HTML
<div id=content02 style=display:none>
hgvhjghj
</div>
<a href=# onclick=showDetails()>Details</a>
JavaScript
function showDetails()
{
var content=$('#content02').html();
var newtab=window.open();
var newdoc=newtab.document;
newdoc.write(content);
newdoc.close();
}
相关文章：
- 单击鼠标，用MySQL数据填充html表单输入字段
- 单击一个数据表，填充第二个数据表
- 单击按钮时填充javascript变量
- 根据单击的元素填充同一页面中的表单，该元素的 ID 由 JSTL 生成
- 如何根据从其他页面单击的链接填充页面内容
- 如何在单击 SVG 用作背景图像时更改其填充颜色
- 使用 jquery 将填充更改为类，但仅更改为单击的项目
- Jquery 发送到电话 单击链接以填充键盘表单中的文本字段
- 单击用文本填充输入框
- Angularjs:通过单击按钮自动填充数据库中的文本框值
- 在页面加载时隐藏菜单，需要在单击超链接时填充
- 单击链接时，无法将记录填充到引导模式
- 如何用数据库中的值填充输入文本字段 单击复选框
- 从单击表单的 html 表行中预填充表单字段.(所有这些都应该发生在JSP上）
- 如何为数据库中的不同记录/行创建用户生成的链接列表，这些记录/行在单击时填充 html 表单
- 填充文本输入时，下拉列表单击 PHP PDO
- 使用单击单选按钮时的数据自动填充输入字段
- 循环填充文本框并单击 js 中的按钮
- 单击第一项时重新填充下拉列表
- 使用Jquery基于按钮单击填充选择下拉列表
