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

var lastTab; 
function pageSheetClick(pageSheet) { 
    if (pageSheet && pageSheet.id) { 
     mode = 0; 
     pageSheet.className = 'bookmarkCenterSel'; 
     selectedPageSheet = pageSheet; 
     if (lastTab != null) lastTab.className = ""; 
     lastTab = pageSheet; 
    } 
} 

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{ 
font-weight:bold; 
text-decoration:none; 
} 
</style> 

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

總結一下，我的問題是，當你點擊一個選項卡，然後單擊後退，你是一樣的標籤然後無法再次選擇該選項卡。我想使它無法點擊選定的選項卡。

我希望你能理解我想要描述的東西。 在此先感謝，Callum

Answer 1

如何將類添加到選項卡時單擊它稱爲「選定」。

這是它如何工作的：

1. 當你點擊一個標籤，你檢查，看看是否在標籤點擊已應用到它的「選擇」類。如果確實如此，則什麼都不做。
2. 如果該選項卡沒有應用「選擇」類，那麼您將清除所有應用了該選項的選項卡。
3. 最後，將「選定」類應用到選項卡。

爲此，您shouldat至少與創建一對夫婦更多的功能，以幫助您處理類開始：

function hasClass(ele,cls) { 
    return ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)')); 
} 
function addClass(ele,cls) { 
    if (!this.hasClass(ele,cls)) ele.className += " "+cls; 
} 
function removeClass(ele,cls) { 
    if (hasClass(ele,cls)) { 
     var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)'); 
     ele.className=ele.className.replace(reg,' '); 
    } 
} 

有了這些，你現在可以檢查，看看你的元素hasClass，可以addClass和removeClass。這是一個開始。這裏給出了HTMLElements的一個很好的參考，它給你提供了可用的屬性和方法。 http://www.w3schools.com/jsref/dom_obj_all.asp。

這足以讓你走嗎？