Question

以下测试html在行上创建选项卡列表（新建，更新，删除）。

当前测试通过javascript / ajax调用更新数据，因此用户选择的选项卡不会更改，因为页面不会重新显示/重新生成。

但是，如果我更改测试，要回拨服务器，所以服务器必须重新显示页面，我不知道如何突出显示用户选择的选项卡！ !!

那么，我该如何编程突出显示/选择一个给定的“dl”元素！

感谢

<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>

Answer 1

将关于突出显示的项目的信息放在哈希“＃”符号之后的页面中，例如index.php?foo=bar#123。然后使用javascript检索信息location.hash（= '#123'）提取数字（例如使用子字符串或RegExp）并使用它来突出显示所需的项目。

以编程方式突出显示/选择“dl”项

1 个答案: