删除默认选项卡选择并添加scrollTo效果

发布于 2024-08-12 21:13:37 字数 1717 浏览 6 评论 0原文

var tabLinks = new Array(); var contentDivs = new Array();

函数 init() {

   // Grab the tab links and content divs from the page
   var tabListItems = document.getElementById('tabs').childNodes;
   for ( var i = 0; i < tabListItems.length; i++ ) {
     if ( tabListItems[i].nodeName == "LI" ) {
       var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
       var id = getHash( tabLink.getAttribute('href') );
       tabLinks[id] = tabLink;
       contentDivs[id] = document.getElementById( id );
     }
   }

   // Assign onclick events to the tab links, and
   // highlight the first tab
   var i = 0;

   for ( var id in tabLinks ) {
     tabLinks[id].onclick = showTab;
     tabLinks[id].onfocus = function() { this.blur() };
     if ( i == 0 ) tabLinks[id].className = 'selected';
     i++;
   }

   // Hide all content divs except the first
   var i = 0;

   for ( var id in contentDivs ) {
     if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
     i++;
   }
 }

函数 showTab() { var selectedId = getHash( this.getAttribute('href') );

    // Highlight the selected tab, and dim all others.
    // Also show the selected content div, and hide all others.
    for ( var id in contentDivs ) {
      if ( id == selectedId ) {
        tabLinks[id].className = 'selected';
      contentDivs[id].className = 'tabContent ';
      } else {
        tabLinks[id].className = '';
        contentDivs[id].className = 'tabContent hide';
      }
    }

    // Stop the browser following the link
    return false;
  }

在上面的JavaScript中,我希望将scrollTo方法添加到tabListItems,并删除默认选项卡选择(即,默认情况下不选择任何选项卡)。

干杯 文卡特

var tabLinks = new Array();
var contentDivs = new Array();

function init() {

   // Grab the tab links and content divs from the page
   var tabListItems = document.getElementById('tabs').childNodes;
   for ( var i = 0; i < tabListItems.length; i++ ) {
     if ( tabListItems[i].nodeName == "LI" ) {
       var tabLink = getFirstChildWithTagName( tabListItems[i], 'A' );
       var id = getHash( tabLink.getAttribute('href') );
       tabLinks[id] = tabLink;
       contentDivs[id] = document.getElementById( id );
     }
   }

   // Assign onclick events to the tab links, and
   // highlight the first tab
   var i = 0;

   for ( var id in tabLinks ) {
     tabLinks[id].onclick = showTab;
     tabLinks[id].onfocus = function() { this.blur() };
     if ( i == 0 ) tabLinks[id].className = 'selected';
     i++;
   }

   // Hide all content divs except the first
   var i = 0;

   for ( var id in contentDivs ) {
     if ( i != 0 ) contentDivs[id].className = 'tabContent hide';
     i++;
   }
 }

function showTab() {
var selectedId = getHash( this.getAttribute('href') );

    // Highlight the selected tab, and dim all others.
    // Also show the selected content div, and hide all others.
    for ( var id in contentDivs ) {
      if ( id == selectedId ) {
        tabLinks[id].className = 'selected';
      contentDivs[id].className = 'tabContent ';
      } else {
        tabLinks[id].className = '';
        contentDivs[id].className = 'tabContent hide';
      }
    }

    // Stop the browser following the link
    return false;
  }

In the above javascript, am looking to add scrollTo method to tabListItems and also remove default tab selection (i.e., no tab is selected by default).

cheers
venkat

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

神爱温柔 2024-08-19 21:13:37

// 将 onclick 事件分配给选项卡链接,并且
// 突出显示第一个选项卡
变量我 = 0;

for ( tabLinks 中的 var id ) {
tabLinks[id].onclick = showTab;
tabLinks[id].onfocus = function() { this.blur() };
if ( i == 0 ) tabLinks[id].className = '';
contentDivs[id].className = 'tabContent 隐藏';
我++;

}
粗体部分已调整..!!

这使得隐藏内容并取消选择默认选项卡!!

有人应该帮助我将scrollTo()方法添加到tabListItems部分!

// Assign onclick events to the tab links, and
// highlight the first tab
var i = 0;

for ( var id in tabLinks ) {
tabLinks[id].onclick = showTab;
tabLinks[id].onfocus = function() { this.blur() };
if ( i == 0 ) tabLinks[id].className = '';
contentDivs[id].className = 'tabContent hide';
i++;

}
bolded part is been tweaked..!!

that makes, to hide the content and also deselects the default tab!!

Someone should help me with adding scrollTo() method to tabListItems part!!!

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文