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

单击选项卡时，如何向选项卡添加类似“选定”的内容。

这是如何运作的：

单击选项卡时，检查单击的选项卡是否已应用“选定”类。如果确实如此，那就什么都不做。
如果标签没有应用“已选择”类，则清除所有应用了“已选定”类的标签。
最后将“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,' ');
    }
}

通过这些，您现在可以检查您的元素是否为classClass，您可以添加addClass和removeClass。这是一个开始。这里是HTMLElements的一个很好的参考，它为您提供了可用的属性和方法。 http://www.w3schools.com/jsref/dom_obj_all.asp

这足以让你前进吗？

Javascript标签搜索框

1 个答案: