Change Color of Opened Tab

[kpcollier]

I've created a tabbed navigation bar for my app using the information from this How To article on Caspio. I'm trying to make it so that the opened tab is a different color from the rest so that the user knows what page they are on. An example would be if you are in the Caspio Bridge and have DataPages open. The navigation bar is a dark color, while the opened tab (DataPages) is white. 

Could anyone help me with some script to accomplish this?

Thanks,

KPC

[kpcollier]

I tried implementing the workflow from this Stack Overflow post. I think this got pretty close. When the page first loads, it is the color I originally had it (blue) but when I click one tab, all of the tab containers would change to silver. It is suppose to change to silver, but only the active tab, and the colors of the other tabs stay blue.

[DefinitelyNot31337]

Hello @kpcollier,

 

Try my modified solution below:

<style>
.ui-resizable-helper { border: 1px dotted gray; }
ul#menu .activeMenu { background: red } 
ul#menu { width: 100%; height: 43px; background: #007c62; font-size: 0.8em; font-family: "Arial", sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0; }
ul#menu li { display: block; float: left; margin: 0 0 0 5px; padding: 8px 15px 0; cursor:pointer;}
ul#menu li a {color: #fff; text-decoration: none; display: block; float: left; line-height: 200%; }
ul#menu li a:hover { color: #333; }
.content{display:block; width:400px; height:400px; padding:30px; border:2px solid gray; overflow:hidden; position:relative;}
.ChannelView{ width:100%; height:100%; margin-bottom:100%;}
</style>

<script>
function getElementByClass(classer) {
var allHTMLTags=document.getElementsByTagName("*");
var array = [];
for (i=0; i<allHTMLTags.length; i++) {
if (allHTMLTags[i].className==classer) {
array.push(allHTMLTags[i]);
}}
return array;}

function channel(n){
    
    var links_1337 = document.querySelectorAll("ul#menu li");
    links_1337.forEach(function(elem, idx) {
        console.log(n, idx)
        if (idx == n)
            elem.className = "activeMenu";
        else
            elem.className = "";
    });
    
    
    
var frames = getElementByClass("ChannelView");
var length = frames.length;
for(var i = 0; i < length; i++)
{ if(frames[i].id == ("viewer"+ n))
{ frames[i].style.display = "inline";
}else{ frames[i].style.display = "none";}}
}
</script>

<div style="display:block; text-align:left;">
<div style="display:block;">
<ul id="menu">

<li><a onclick="channel(0)">Tab 0</a></li>
<li><a onclick="channel(1)">Tab 1</a></li>
<li><a onclick="channel(2)">Tab 2</a></li>

</ul>
</div>

<div class="content">

<iframe frameborder=0 id="viewer0" class="ChannelView"  src="URL of Tab 0" style="display:inline"></iframe>
<iframe  frameborder=0 id="viewer1" class="ChannelView" src="URL of Tab 1"></iframe>
<iframe  frameborder=0 id="viewer2" class="ChannelView" src="URL of Tab 2"></iframe>

</div>
</div>

 

The few lines I have modified are as follows:

1.) function channel(n)

channel = function channel(n){
    
    var links_1337 = document.querySelectorAll("ul#menu li");
    links_1337.forEach(function(elem, idx) {
        console.log(n, idx)
        if (idx == n)
            elem.className = "activeMenu";
        else
            elem.className = "";
    });
    
    
    
var frames = getElementByClass("ChannelView");
var length = frames.length;
for(var i = 0; i < length; i++)
{ if(frames[i].id == ("viewer"+ n))
{ frames[i].style.display = "inline";
}else{ frames[i].style.display = "none";}}
}

 

2.) The styling for the active tab (CSS).

ul#menu .activeMenu { background: red }

Note: if you wish to target the link, use the selector [ ul#menu .activeMenu a ] instead (without braces).

 

I hope this information helps.

 

This is not fully tested, but hopefully it works

 

Cheers!

-DN31337

[kpcollier]

@DefinitelyNot31337,

Thanks! I greatly appreciate it. This workflow is working. You're a hero.

[kpcollier]

Hey @DefinitelyNot31337, is there a way I can make it so that when a page is first loaded the first tab has the active class? I've messed around with your script a little and can't seem to get a working function. 

[DefinitelyNot31337]

Hi @kpcollier,

 

You don't need to modify the script. Just call channel(0) before the <script> tag ends.

 

Example:

<script>
    ...
    var frames = getElementByClass("ChannelView");
    var length = frames.length;
    for(var i = 0; i < length; i++) { 
      if (frames[i].id == ("viewer"+ n)) { 
          frames[i].style.display = "inline";
      } else { 
        frames[i].style.display = "none";}
    }
  }
  
  
  channel(0);
  
</script>

 

Hope this information helps.

 

Best regards,

DN31337