标签框

Question

我有一个标签框，我正在尝试构建一个“下一个”按钮，以便在每个标签中移动。它的工作原理除了选项卡按钮上的活动状态在点击“下一步”时不会改变。无论我在哪个标签上，第一个标签都会保持突出显示。请在此处查看示例：http://codepen.io/EBM84/pen/VmjPRQ

感谢任何帮助。谢谢！

<div class="tabs">
  <ul class="tab-links">
    <li class="active"><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
    <li><a href="#tab4">Tab 4</a></li>
  </ul>

  <div class="tab-content">
    <div id="tab1" class="tab active">
      <h4>Tab 1</h4>
      <ul class="tab-links">
        <li class="active">
          <a href="#tab2" role="button">next ></a>
        </li>
      </ul>
    </div>

    <div id="tab2" class="tab">
      <h4>Tab 2</h4>
      <ul class="tab-links">
        <li>
          <a href="#tab3" role="button">next ></a>
        </li>
      </ul>
    </div>

    <div id="tab3" class="tab">
      <h4>Tab 3</h4>
      <ul class="tab-links">
        <li>
          <a href="#tab4" role="button">next ></a>
        </li>
      </ul>
    </div>

    <div id="tab4" class="tab">
      <h4>Tab 4</h4>
    </div>

  </div>
</div>  

Answer 1

要使下一个标签突出显示，您需要这段代码。

＆＃13;

＆＃13;

 jQuery('.tab-links a[href="'+ currentAttrValue +'"]').parent('li').addClass('active');

＆＃13;

＆＃13;

＆＃13;

您仍然需要让之前的标签不是＆＃34;有效＆＃34;，但希望这会让您朝着正确的方向前进。

Answer 2

要扩展Luke Beckers代码 - 您可以在删除活动类之前：

 jQuery('.tab-links li').removeClass('active');
 jQuery('.tab-links a[href="'+ currentAttrValue +'"]').parent('li').addClass('active');

我分叉你的codepen来提供一个例子 - http://codepen.io/ad-kemp/pen/qqNmJE

希望这有帮助。

Answer 3

这是我使用NEXT和PREV按钮的解决方案。希望它有所帮助:)。

＆＃13;

＆＃13;

jQuery(document).ready(function() {
    jQuery('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = jQuery(this).attr('href');
 
        // Show/Hide Tabs
        jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
 
        // Change/remove current tab to active
        jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
 
        e.preventDefault();
    });
   
     
    jQuery('.nextButton').on('click', function() {
        
   var $activeTab = $('.tab-links li.active');
	 
	 var $wrapper = jQuery(this).closest('.tabs');
   var indexActive = $wrapper.find('li.active').index();
   $wrapper.find('li').eq(indexActive + 1).find('a').click();
});
    
     jQuery('.prevButton').on('click', function() {
        
   var $activeTab = $('.tab-links li.active');
	 
	 var $wrapper = jQuery(this).closest('.tabs');
   var indexActive = $wrapper.find('li.active').index();
   $wrapper.find('li').eq(indexActive - 1).find('a').click();
});
    
});

＆＃13;

.tabs {
    width:100%;
    display:inline-block;
   }

   .tabs h4 {
    color: #00447c;
    margin: 5px 0 15px 0;
    display: inline-block;
   }
 
  .tab-links:after {
    display:block;
    clear:both;
    content:'';
  }

  .tab-links {
    padding: 0;
    margin: 10px 0 0 0;
    position: relative;
    top: 2px;
  }

  .tab-links li {
    margin:0px 5px 0 0;
    float:left;
    padding-top: 2px;
    list-style:none;
  }

  .tab-links a {
    padding:9px 8px 6px;
    display:inline-block;
    background: #c7d8e8;
    border: 2px solid #c7d8e8;
    border-bottom: 3px solid #c7d8e8;
    font-size: 10.5px;
    font-weight:600;
    color:#00447c;
    transition:all linear 0.15s;
  }

  .tab-links a:hover {
    background: #a7cce5;
    text-decoration:none;
    border: 2px solid #a7cce5;
    border-bottom: 3px solid #a7cce5;  
    color: #ee3124;
  }

  li.active a, li.active a:hover {
    background:#fff;
    height: 16px;
    border-bottom: none;
    color: #ee3124;
  }

  .tab-content, .uploaded-documents-container {
    padding:15px;
    border-radius:3px;
    border: 2px solid #c7d8e8;
    background:#fff;
    font-size: .95em;
  }

  .tab-content-scroll {
    max-height: 375px;
    min-height: 375px;
    max-width: 1100px;
    min-width: 450px;
    overflow: auto;
    clear:both;
  }

  .tab-content-scroll-home {
    min-height: 135px;
  }

  .button-bar-scroll {
    min-height: 235px;
  }

  .tab-content-scroll>p {
    margin-top: 0;
    padding-right: 12px;
  }

  .tab-content a {
    margin-top: 10px;
    color: #00447c;
  }

  .tab {
    display:none;
  }

  .tab.active {
    display:block;
  }

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body>
  <div class="tabs">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">Tab #1</a></li>
        <li><a href="#tab2">Tab #2</a></li>
        <li><a href="#tab3">Tab #3</a></li>
        <li><a href="#tab4">Tab #4</a></li>
    </ul>
 
    <div class="tab-content">
        <div id="tab1" class="tab active">
           <h4>Tab 1</h4>
          <ul class="tab-links">
         <li>
		  <a href="#next_tab2" class="nextButton">Next</a>
		</li>
	</ul>
        </div>
 
        <div id="tab2" class="tab">
        <h4>Tab 2</h4>
        <ul class="tab-links">
        <li>
          <a href="#back_tab1" class="prevButton">Prev</a>
		  <a href="#next_tab2" class="nextButton">Next</a>
		</li>
	</ul>
        </div>
 
        <div id="tab3" class="tab">
        <h4>Tab 3</h4>
        <ul class="tab-links">
        	<li>
          <a href="#back_tab1" class="prevButton">Prev</a>
		  <a href="#next_tab2" class="nextButton">Next</a>
		</li>
	</ul>
        </div>
 
        <div id="tab4" class="tab">
        	<h4>Tab 4</h4>
        	<ul class="tab-links">
        	<li>
          <a href="#back_tab1" class="prevButton">Prev</a>
      </li>
  </ul>
        </div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;