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

总结一下，我的问题是当选择一个标签然后选择另一个标签时，第一个选定的标签仍处于选中状态。

我希望你能理解我想要描述的内容。提前致谢，Callum

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

Javascript标签式搜索框标签突出显示

1 个答案: