the following test html creates a tabbed list (new, update, delete) on the row.
the current test updates the data, via javascript/ajax calls, and so the tab selected by the user doesn't change, as the page isn't redisplayed/regenerated.
however, if i ch开发者_开发百科ange the test, to do a call back to the server, so the server has to redisplay the page, i'm at a loss to figure out how to highlight the tab that the user had selected!!!!
so, how the heck can i programmtaiclly highlight/select one of the given "dl" elements!
thanks
<dl class="tabs" id="configPane">
<dt id="newterm-page" onclick="location.href='#'"><span>New Term</span></dt>
<dd>
<table class="adminform" width="100%">
<div style="border:1px solid #ccc">
<div>
<div style="width:200px;float:left;">Current Terms</div>
<div style="width:400px" id="newTerms"><select name="termList" id="termList" class="inputbox" size="1" title="Display List of Current Terms"><option value="1" >Spring</option><option value="2" >Summer</option><option value="3" >Fall</option><option value="9" >Winter</option><option value="10" >Summer I</option><option value="11" >Summer II</option></select></div>
</div>
<div><br></div>
<div>
<div style="width:200px;float:left;">New Term</div>
<input size="20" type="text" name="nterm" id="nterm" value="" />
</div>
<div><br></div>
<div>
<input type="button" name="button" value="Create Term" onclick="javascript: createTerm(); return false;">
</div>
</div>
</table>
</dd>
<dt id="updateterm-page" onclick="javascript: jt1('update'); return false;"><span>Update Term</span></dt>
<dd>
<table class="adminform" width="100%">
<div style="border:1px solid #ccc">
<div>
<div style="width:200px;float:left;">Select Term to Update</div>
<div style="width:400px;" id="updateTerms"><select name="upterm" id="upterm" class="inputbox" size="1" title="Display List of Current Terms"><option value="1" >Spring</option><option value="2" >Summer</option><option value="3" >Fall</option><option value="9" >Winter</option><option value="10" >Summer I</option><option value="11" >Summer II</option></select></div>
</div>
<div><br></div>
<div>
<div style="width:200px;float:left;">Updated Term</div>
<input size="20" type="text" name="uterm" id="uterm" value="" />
</div>
<div><br></div>
<div>
<input type="button" name="button" value="Update Term" onclick="javascript: updateTerm(); return false;">
</div>
</div>
</table>
</dd>
<dt id="deleteterm-page" onclick="javascript: jt1('delete'); return false;"><span>Delete Term</span></dt>
<dd>
<table class="adminform" width="100%">
<div style="border:1px solid #ccc">
<div>
<div style="width:200px;float:left;">Select Term to Delete</div>
<div style="width:400px;" id="deleteTerms"><select name="delterm" id="delterm" class="inputbox" size="1" title="Display List of Current Terms"><option value="1" >Spring</option><option value="2" >Summer</option><option value="3" >Fall</option><option value="9" >Winter</option><option value="10" >Summer I</option><option value="11" >Summer II</option></select></div>
</div>
<div><br></div>
<div><br></div>
<div>
<input type="button" name="button" value="Delete Term" onclick="javascript: deleteTerm(); return false;">
</div>
<div><br></div>
</div>
</table>
</dd></dl>
Place information about highlighted item in url to page after the hash "#" sign, e.g. index.php?foo=bar#123
.
Then use javascript to retrieve the information with location.hash
(='#123'
) extract the number (for example with substring or RegExp) and use it to highlight desired item.
精彩评论