Click here to Skip to main content
15,886,110 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
How to Enable Client Cookies in below Tab Selected Option.

XML
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <script type="text/javascript" src="Scripts/domtab.js"></script>
    <script type="text/javascript">
        document.write('<style type="text/css">');
        document.write('div.domtab div{display:none;}<');
        document.write('/s' + 'tyle>');
    </script>
    <p id="domtabprintview">
    </p>
    <div class="domtab">
        <ul class="domtabs">
            <li><a href="#what">Knowlege Sharing Center</a></li>
            <li><a href="#how">Knowledge</a></li>
            <li><a href="#pr">Category</a></li>
            <li><a href="#style">Sub Category</a></li>
        </ul>
        <div>
            <a name="what" id="what">What is Dom Tab</a> What
            <asp:GridView ID="GridView1" runat="server">
            </asp:GridView>
        </div>
        <div>
            <a name="how" id="how">How to use DOMtab</a> DOMtab
        </div>
        <div>
            <a name="pr" id="pr">Previous and next links</a>Previous
        </div>
        <div>
            <a name="style" id="style">How to style DOMtab</a>How
        </div>
</asp:Content>

/*--------------------------------------Menu---------------------*/
HTML
*{
  margin:0;
  padding:0;
  list-style:none;
  border:none;
  }
  ul.domtabs li{
  float:left;
  padding:0 .5em 0 0;
  }
  ul.domtabs a:link,
  ul.domtabs a:visited,
  ul.domtabs a:active,
  ul.domtabs a:hover{
  width:8em;
  padding:.2em 1em;
  display:block;
  background:#3a4f63;
  color:#fff;
  height:3em;
  text-decoration:none;
  }
  div.domtab div{
  clear:both;
  width:35.5em;
  background:#000033;
  color:#fff;
  padding:1em 3em;
  }
  h1{
  padding:1em 2;
  background:#fff;
  }

C#
domtab = {
    tabClass: 'domtab',
    listClass: 'domtabs',
    contentElements: 'div',
    init: function () {

        var temp;
        if (!document.getElementById || !document.createTextNode) { return; }
        var tempelm = document.getElementsByTagName('div');
        for (var i = 0; i < tempelm.length; i++) {
            if (!domtab.cssjs('check', tempelm[i], domtab.tabClass)) { continue; }
            domtab.initTabMenu(tempelm[i]);
          //  domtab.removeBackLinks(tempelm[i]);
            if (domtab.cssjs('check', tempelm[i], domtab.prevNextIndicator)) {
              //  domtab.addPrevNext(tempelm[i]);
            }
           // domtab.checkURL();
        }
        if (document.getElementById(domtab.printID)
 && !document.getElementById(domtab.printID).
  getElementsByTagName('a')[0]) {
            var newlink = document.createElement('a');
            newlink.setAttribute('href', '#');
            domtab.addEvent(newlink, 'click', domtab.showAll, false);
            newlink.onclick = function () { return false; }
            newlink.appendChild(document.createTextNode(domtab.
  showAllLinkText));
            document.getElementById(domtab.printID).appendChild(newlink);
        }
    },

    initTabMenu: function (menu) {
        var id;
        var lists = menu.getElementsByTagName('ul');
        for (var i = 0; i < lists.length; i++) {
            if (domtab.cssjs('check', lists[i], domtab.listClass)) {
                var thismenu = lists[i];
                break;
            }
        }
        if (!thismenu) { return; }
        thismenu.currentSection = '';
        thismenu.currentLink = '';
        var links = thismenu.getElementsByTagName('a');
        for (i = 0; i < links.length; i++) {
            if (!/#/.test(links[i].getAttribute('href').toString()))
            { continue; }
            id = links[i].href.match(/#(\w.+)/)[1];
            if (document.getElementById(id)) {
                domtab.addEvent(links[i], 'click', domtab.showTab, false);
                links[i].onclick = function () { return false; }
                domtab.changeTab(document.getElementById(id), 0);
            }
        }
        id = links[0].href.match(/#(\w.+)/)[1];
        if (document.getElementById(id)) {
            domtab.changeTab(document.getElementById(id), 1);
            thismenu.currentSection = id;
            thismenu.currentLink = links[0];
            domtab.cssjs('add', links[0].parentNode, domtab.activeClass);
        }
    },


    changeTab: function (elm, state) {
        do {
            elm = elm.parentNode;
        } while (elm.nodeName.toLowerCase() != domtab.contentElements)
        elm.style.display = state == 0 ? 'none' : 'block';
    },
    showTab: function (e) {
        var o = domtab.getTarget(e);
        if (o.parentNode.parentNode.currentSection != '') {
            domtab.changeTab
  (document.getElementById(o.parentNode.parentNode.
  currentSection), 0);
            domtab.cssjs
  ('remove', o.parentNode.parentNode.currentLink.parentNode,
  domtab.activeClass);
        }
        var id = o.href.match(/#(\w.+)/)[1];
        o.parentNode.parentNode.currentSection = id;
        o.parentNode.parentNode.currentLink = o;
        domtab.cssjs('add', o.parentNode, domtab.activeClass);
        domtab.changeTab(document.getElementById(id), 1);
        document.getElementById(id).focus();
        //domtab.cancelClick(e);
    },

    getTarget: function (e) {
        var target = window.event ? window.event.srcElement :
   e ? e.target : null;
        if (!target) { return false; }
        if (target.nodeName.toLowerCase() != 'a') { target = target.parentNode; }
        return target;
    },

    addEvent: function (elm, evType, fn, useCapture) {
        if (elm.addEventListener) {
            elm.addEventListener(evType, fn, useCapture);
            return true;
        } else if (elm.attachEvent) {
            var r = elm.attachEvent('on' + evType, fn);
            return r;
        } else {
            elm['on' + evType] = fn;
        }
    },
    cssjs: function (a, o, c1, c2) {
        switch (a) {
            case 'swap': o.className = !domtab.cssjs
  ('check', o, c1) ? o.className.replace(c2, c1) : o.className.replace(c1, c2);
                break;
            case 'add':
                if (!domtab.cssjs('check', o, c1)) {
                    o.className +=
   o.className ? ' ' + c1 : c1;
                }
                break;
            case 'remove':
                var rep = o.className.match(' ' + c1) ? ' ' + c1 : c1;
                o.className = o.className.replace(rep, '');
                break;
            case 'check':
                var found = false;
                var temparray = o.className.split(' ');
                for (var i = 0; i < temparray.length; i++) {
                    if (temparray[i] == c1) { found = true; }
                }
                return found;
                break;
        }
    }
}
domtab.addEvent(window, 'load', domtab.init, false);
Posted
Updated 9-Aug-12 18:18pm
v2
Comments
Sandeep Mewara 10-Aug-12 1:12am    
This is not a well framed question! We cannot work out what you are trying to do/ask from the post. Please elaborate and be specific.
Use the "Improve question" link to edit your question and provide better information.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900