Question

我有以下jQuery代码：

 $(function() {
  // constants
  var SHOW_CLASS = 'show',
      HIDE_CLASS = 'hide',
      ACTIVE_CLASS = 'active';

  // $( ".tabs" ).tabs( { disabled: [1, 2] } ); 

  $( '.tabs' ).on( 'click', 'li a', function(e){
    e.preventDefault();
    var $tab = $( this ),
        href = $tab.attr( 'href' );

    $( '.active' ).removeClass( ACTIVE_CLASS );
    $tab.addClass( ACTIVE_CLASS );

    $( '.show' )
       .removeClass( SHOW_CLASS )
       .addClass( HIDE_CLASS )
       .hide();

     $(href)
       .removeClass( HIDE_CLASS )
       .addClass( SHOW_CLASS )
       .hide()
       .fadeIn( 550 );
  });       
});

当我在选项卡下方提交表格时，例如

<form action="#coreData" method="post" enctype="multipart/form-data">

网址类似于mypage.com/home.php#coreData。

如何实现以下目标？ -

每当存在锚链接（见上文）时，活动选项卡应该是引用的选项卡。在这种情况下，活动选项卡应该是带有#coreData a href。

的选项卡

HTML CODE标签创建

<ul class="tabs">
    <li>
        <a href="#uploadPicture" class="active">Picutre</a>
    </li>
    <li>
        <a href="#coreData">Core Data</a>
    </li>
    <li>
        <a href="#aboutMe">About You</a>
    </li>
    <li>
        <a href="#keywords">(Yaa) Job</a>
    </li>
    <li>
        <a href="#location">Location</a>
    </li>
    <li>
        <a href="#skills">Skills</a>
    </li>
    <li>
        <a href="#cv">Your CV</a>
    </li>
    <li>
        <a href="#attachments">Attachments</a>
    </li>
</ul>

Answer 1

在页面加载时，查看document.location.hash的值，然后在相应的选项卡上设置活动状态。

为了方便起见，您可能希望使用ID或类名

<a class="coreData" href="#coreData">

然后..

$("."+yourhashvalue).addClass('active');

Jquery将Active Tab设置为Anchor Link

1 个答案: