Javascript tabbed search box

I have a search box with JavaScript and CSS tabs on it which control the destination of the search. However, when you click on a tab and then click back on the same tab you are then unable to select that tab again. I want to make it so that it isn't possible to click on the selected tab. How can I go about doing this?

I have posted a copy of my code below.

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

Then my HTML and CSS:

<style type="text/css">
.bookmarkCenterSel{
font-weight:bold;
text-decoration:none;
}开发者_StackOverflow
</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;">

To recap, my problem is that when you click on a tab and then click back on the same tab you are then unable to select that tab again. I want to make it so that it isn't possible to click on the selected tab.

I hope you can understand what I am trying to describe. Thanks in advance, Callum

How about adding a class to the tab when you click it called something like "selected".

This is how it would work:

1. When you click a tab, you check to see if the tab clicked already has the "selected" class applied to it. If it does then do nothing.
2. If the tab does not have the "selected" class applied to it then you clear all tabs with the "selected" class applied to it.
3. And finally apply the "selected" class to the tab.

For this you shouldat least start with creating a couple more functions to help you with dealing with classes:

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

With those you can now check to see if your element hasClass, you can addClass and removeClass. Which is a start. And here is a good reference for HTMLElements which gives you the properties and methods that are available. http://www.w3schools.com/jsref/dom_obj_all.asp.

Is that enough to get you going?