Hi All,
We have just developed a custom object code which can help to navigate Previous and Next Tab set within the record.
Please see the code below and expecting your valuable suggestions and corrections :
<!DOCTYPE html>
<html>
<body><style type="text/css">
.btn{color:#FFF!important;text-shadow:0 -1px 0 rgba(0,0,0,.25);background-image:none!important;border:5px solid #FFF;border-radius:0;box-shadow:none!important;-webkit-transition:background-color .15s,border-color .15s,opacity .15s;-o-transition:background-color .15s,border-color .15s,opacity .15s;transition:background-color .15s,border-color .15s,opacity .15s;vertical-align:middle;margin:0;position:relative}.btn-primary,.btn-primary.focus,.btn-primary:focus{background-color:#428bca!important;border-color:#428bca}.btn-primary.focus:hover,.btn-primary:active:hover,.btn-primary:focus:active,.btn-primary:focus:hover,.btn-primary:hover{background-color:#1b6aaa!important;border-color:#428bca}.btn-primary.no-border:active,.btn-primary.no-border:hover{border-color:#1b6aaa}.btn-primary.no-hover:active,.btn-primary.no-hover:hover{background-color:#428bca!important}.btn-primary.active,.btn-primary.active:focus,.btn-primary.active:hover,.btn-primary.focus.active{background-color:#2f7bba!important;border-color:#27689d}.btn-primary.no-border.active{background-color:#2b72ae!important;border-color:#2b72ae}.btn-info,.btn-info.focus,.btn-info:focus{background-color:#6fb3e0!important;border-color:#6fb3e0}.btn-info.focus:hover,.btn-info:active:hover,.btn-info:focus:active,.btn-info:focus:hover,.btn-info:hover{background-color:#4f99c6!important;border-color:#6fb3e0}.btn-info.no-border:active,.btn-info.no-border:hover{border-color:#4f99c6}.btn-info.no-hover:active,.btn-info.no-hover:hover{background-color:#6fb3e0!important}.btn-info.active,.btn-info.active:focus,.btn-info.active:hover,.btn-info.focus.active{background-color:#5fa6d3!important;border-color:#4396cb}.btn-info.no-border.active{background-color:#539fd0!important;border-color:#539fd0}.btn-info.disabled,.btn-info.disabled.active,.btn-info.disabled:active,.btn-info.disabled:focus,.btn-info.disabled:hover,.btn-info[disabled],.btn-info[disabled].active,.btn-info[disabled]:active,.btn-info[disabled]:focus,.btn-info[disabled]:hover,fieldset[disabled] .btn-info,fieldset[disabled] .btn-info.active,fieldset[disabled] .btn-info:active,fieldset[disabled] .btn-info:focus,fieldset[disabled] .btn-info:hover{background-color:#6fb3e0!important;border-color:#6fb3e0}.previous{float:left}.next{float:right}.pager{padding-left:0;margin:20px 0;list-style:none;text-align:center;width:50%}
</style>
<div class="pager"; align="left">
<button class="btn btn-info previous">
← Previous
</button>
<button class="btn btn-primary next">
Next →
</button>
</div>
<script>
var btnElm= document.getElementsByClassName("previous");
btnElm[0].addEventListener('click',function(){
var currentActive=document.getElementsByClassName('rtsSelected')[0];
var parentLi=currentActive.parentNode;
var previousElm=parentLi.previousSibling;
while(previousElm && previousElm.nodeType != 1) {
previousElm = previousElm.previousSibling
}
console.log(previousElm);
var linkTag=previousElm.getElementsByTagName("a");
linkTag[0].className += " rtsSelected rtsClicked";
currentActive.classList.remove('rtsSelected');
currentActive.classList.remove('rtsClicked');
linkTag[0].click();
});
var btnElmnext= document.getElementsByClassName("next");
btnElmnext[0].addEventListener('click',function(){
var currentActive=document.getElementsByClassName('rtsSelected')[0];
var parentLi=currentActive.parentNode;
var nextElm=parentLi.nextSibling;
while(nextElm && nextElm.nodeType != 1) {
nextElm = nextElm.nextSibling
}
console.log(nextElm);
var linkTag=nextElm.getElementsByTagName("a");
linkTag[0].className += " rtsSelected rtsClicked";
currentActive.classList.remove('rtsSelected');
currentActive.classList.remove('rtsClicked');
linkTag[0].click();
});
</script>
</body>
</html>
Thanks and Best Regards
HariKrishna
