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

总而言之，我的问题是，当您单击一个选项卡然后再次单击同一选项卡时，您将无法再次选择该选项卡。我想让它无法单击选定的选项卡。

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

Answer 1

如何在您单击名为“已选择”之类的名称时向选项卡添加一个类。

它是这样工作的:

1. 当您单击一个选项卡时，您会检查单击的选项卡是否已经应用了“选定”类。如果是，则什么也不做。
2. 如果选项卡没有应用“选定”类，则清除所有应用了“选定”类的选项卡。
3. 最后将“selected”类应用到选项卡。

为此，您至少应该从创建更多函数开始，以帮助您处理类:

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

有了这些你现在可以检查你的元素是否有类，你可以添加类和移除类。这是一个开始。这里是 HTMLElements 的一个很好的引用，它为您提供了可用的属性和方法。 http://www.w3schools.com/jsref/dom_obj_all.asp .

这足以让您继续前进吗？