0

WEBデザイン初心者です。この問題を解決してくれる専門家が必要です。

その下には、TABS の作成に使用している JS があります。既定のタブは既に変更していますが、既定のタブ ページを変更する方法がわかりません。助けてください ！！！

<script type="text/javascript">
//<![CDATA[

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["order"].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 = 'active';
      contentDivs[id].className = 'tabContent';
    } else {
      tabLinks[id].className = '';
      contentDivs[id].className = 'tabContent hide';
    }
  }

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

function getFirstChildWithTagName( element, tagName ) {
  for ( var i = 0; i < element.childNodes.length; i++ ) {
    if ( element.childNodes[i].nodeName == tagName ) return element.childNodes[i];
  }
}

function getHash( url ) {
  var hashPos = url.lastIndexOf ( '#' );
  return url.substring( hashPos + 1 );
}

//]]>
</script>

これはタブのリストです

<ul id="tabs">
      <li><a href="#features">Product Features</a></li>
      <li><a  class="selected" href="#order">Order UNIFY Sutures</a> </li>
      <li><a href="#spec">Specifications</a></li>  
      <li><a href="#testi">Testimonials</a></li>  
      <li><a href="#overview">Suture Overview</a></li>  

    </ul>
4

2 に答える 2

0

ここでコードを変更します

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

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

if 句のゼロif ( i != 0 )は、アクティブなタブ ページを定義します。 あなたが望むことを行い、使いやすいjquery ui tabs

を 見ることもできます。

于 2013-08-23T21:48:20.447 に答える
0

showTab 関数を次のように置き換えます。

function showTab() {
  var selectedId = getHash( this.getAttribute('href') );      
  selectTab(selectedId);
  return false;
}

function selectTab(selectedId) {

  // 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 = 'active';
      contentDivs[id].className = 'tabContent';
    } else {
      tabLinks[id].className = '';
      contentDivs[id].className = 'tabContent hide';
    }
  }
}

次に、特定のタブを選択するには、次のように呼び出します。

selectTab('spec');

編集: selectTab('#spec'); を変更しました。to selectTab('スペック');

JSFiddle

于 2013-08-23T21:53:08.373 に答える