Javascript 选项卡式搜索框选项卡突出显示

Question

我有一个搜索框，上面有 JavaScript 和 CSS 选项卡，用于控制搜索的目标。但是，当您单击一个选项卡然后单击另一个选项卡时，前一个选项卡仍保持选中状态。有没有办法让我的代码取消选择上一个选项卡？我在下面发布了我的代码副本。

我的 JavaScript:

var isDOM = (document.getElementById ? true : false);
function getElement(id){
 if (isDOM) { return document.getElementById(id); }
}

function pageSheetClick(pageSheet){
    if ( pageSheet && pageSheet.id ){
        mode=0;
        pageSheet.className = 'bookmarkCenterSel';
        selectedPageSheet = pageSheet;
    }
}

function CheckKey(e){
if( typeof( e.keyCode ) == 'number' ) {
e = e.keyCode;
}
if (e == 13){
changePage(getElement('q').value);
}
}

function changePage(findtext){
 var tmp=findtext;
  if (mode==0) {
  pId = selectedPageSheet.id.split('_');
  if (pId[0]=='web')
      html="/search/"+tmp+"/1/";
  if (pId[0]=='images')
      html="/images/"+tmp+"/1/";
  if (pId[0]=='videos')
      html="/videos/"+tmp+"/1/";
  if (pId[0]=='news')
      html="/news/"+tmp+"/1/";
  if (pId[0]=='twitter')
      html="/twitter/"+tmp+"/1/";
  } if (tmp!="")
  window.location=html;
}

然后是我的 HTML 和 CSS:

<style type="text/css">
.bookmarkCenterSel{
text-align:center;
font-weight:bold;
text-decoration:none;
}
</style>

<table cellspacing="0" cellpadding="0">
<tr>
<td id="web_center" class="bookmarkCenter" onclick="pageSheetClick(this);"><a href="javascript:void(null);">Web</a></td>
<td id="images_center" class="bookmarkCenter" onclick="pageSheetClick(this);"><a href="javascript:void(null);">Images</a></td>
<td id="videos_center" class="bookmarkCenter" onclick="pageSheetClick(this);"><a href="javascript:void(null);">Videos</a></td>
<td id="news_center" class="bookmarkCenter" onclick="pageSheetClick(this);"><a href="javascript:void(null);">News</a></td>
<td id="twitter_center" class="bookmarkCenter" onclick="pageSheetClick(this);"><a href="javascript:void(null);">Twitter</a></td>
</tr>
</table>
<input type="text" id="q" name="q" onkeypress="CheckKey(event);return true;">

回顾一下，我的问题是当选择一个选项卡然后选择另一个选项卡时，第一个选择的选项卡保持选中状态。

希望您能理解我要描述的内容。提前致谢，卡勒姆

Answer 1

看起来这样应该可行:

var lastTab;

function pageSheetClick(pageSheet){
    if(pageSheet && pageSheet.id){
        mode = 0;
        pageSheet.className = 'bookmarkCenterSel';
        selectedPageSheet = pageSheet;

        if(lastTab != null) lastTab.className = "";
        lastTab = pageSheet;
    }
}