javascript - ページの読み込み時にメニューを非表示にし、ハイパーリンクのクリック時に入力する必要がある

Question

私が直面している問題は、タブに検索ページがあり、検索をクリックすると結果が表示されることです。

しかし、 result をクリックすると、詳細結果が新しいタブで開かれます。

最初はタブの詳細を非表示にしました。そして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>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <button type="button" class="button_action_large" title='Reset'
                onclick="submitEvent('RESET_EVENT');">
                <span>Reset</span>
            </button>
            &nbsp;&nbsp;&nbsp;&nbsp; <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">&nbsp;</td>
<%}%>
<%if(result.getUsid()!=null && !result.getUsid().equals("")){%>
<td class="quantity_data"><bean:write name="result" property="usid"/></td>
<%}else{%>
<td class="quantity_data">&nbsp;</td>
<%}%>
<%if(result.getRouterName()!=null && !result.getRouterName().equals("")){%>
<td class="quantity_data"><bean:write name="result" property="routerName"/></td>
<%}else{%>
<td class="quantity_data">&nbsp;</td>
<%}%>
<%if(result.getCircuitId()!=null && !result.getCircuitId().equals("")){%>
<td class="quantity_data"><bean:write name="result" property="circuitId"/></td>
<%}else{%>
<td class="quantity_data">&nbsp;</td>
<%}%>
<%if(result.getCountryName()!=null && !result.getCountryName().equals("")){%>
<td class="quantity_data"><bean:write name="result" property="customerName"/></td>
<%}else{%>
<td class="quantity_data">&nbsp;</td>
<%}%>
<%if(result.getCustomerCode()!=null && !result.getCustomerCode().equals("")){%>
<td class="quantity_data"><bean:write name="result" property="customerCode"/></td>
<%}else{%>
<td class="quantity_data">&nbsp;</td>
<%}%>
<%if(result.getCustomerStatus()!=null && !result.getCustomerStatus().equals("")){%>
<td class="quantity_data"><bean:write name="result" property="customerStatus"/></td>
<%}else{%>
<td class="quantity_data">&nbsp;</td>
<%}%>
<%if(result.getCountryName()!=null && !result.getCountryName().equals("")){%>
<td class="quantity_data"><bean:write name="result" property="countryName"/></td>
<%}else{%>
<td class="quantity_data">&nbsp;</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>

score 0 · Accepted Answer

正しい方向に導くのに役立ついくつかのコードスニペットを次に示します。

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();
}

javascript - ページの読み込み時にメニューを非表示にし、ハイパーリンクのクリック時に入力する必要がある

1 に答える 1

Related

Reference