jquery - 如何使用 jQuery 或 CSS 更改事件 h5 选项卡的颜色

Question

所以我正在尝试实现由 Zoe Rooney 编写的一些代码.我能够让一切正常工作，唯一遇到的问题是格式化选项卡。

这是我所做的，我有一个名为 tabs.js 的文件，其中包含以下代码:

jQuery(document).ready(function($){

// This first section is all about formatting the content correctly for tabs

// Add the opening list tag before the first H5 within the description 
$('.product-description h5:first-of-type').before('<ul class="tabs" />');

// Loop through each H5 in the description
$('.product-description h5').each(function(index, value){
    // Assign them each a number, in order
    var num = index + 1;

    // For each H5, wrap everything from after the heading to just before the next one in a div
    // Give each div a unique ID that includes those assigned numbers
    $(this).nextUntil('h5').wrapAll('<div class="tab-content" id="tab' + num + '" />');

    // For each h5, wrap the H5 itself in a list item and an anchor link to the div
    $(this).wrap('<li class="single-tab"><a href="#tab' + num + '"></a></li>');
});

// Wrap the whole list and the tab content divs in a surrounding div
$('ul.tabs, .tab-content').wrapAll('<div class="tab-area" />');

// Move that surrounding div after the form
$('.tab-area').appendTo('.content');

// Loop through the list items (the tab headers)
$('.single-tab').each(function(){
    // Move them into the list element
    $(this).appendTo('ul.tabs');
});


// The rest of this is the actual tab functionality, from http://www.jacklmoore.com/notes/jquery-tabs/

$('ul.tabs').each(function(){

  // For each set of tabs, we want to keep track of
  // which tab is active and it's associated content
  var $active, $content, $links = $(this).find('a');

  // If the location.hash matches one of the links, use that as the active tab.
  // If no match is found, use the first link as the initial active tab.
  $active = $($links.filter('[href="'+location.hash+'"]')[0] || $links[0]);
  $active.addClass('active');
  $content = $($active.attr('href'));

  // Hide the remaining content
  $links.not($active).each(function () {
    $($(this).attr('href')).hide();
  });

  // Bind the click event handler
  $(this).on('click', 'a', function(e){
    // Make the old tab inactive.
    $active.removeClass('active');
    $content.hide();

    // Update the variables with the new link and content
    $active = $(this);
    $content = $($(this).attr('href'));

    // Make the tab active.
    $active.addClass('active');
    $content.show();

    // Prevent the anchor's default click action
    e.preventDefault();
  });
});
});

这是我对 CSS 的看法:

.single-tab h5:hover {
    list-style:none;
    display:inline;
    color:#666;
} 

.single-tab h5 {
    list-style:none;
    display:inline;
    color:#949494;
}

.single-tab li {
    list-style:none;
    display:inline;
}

.single-tab a {
    padding:0px 5px;
    display:inline-block;
    background:#ffffff;
    color:#fff;
    text-decoration:none;
}

.single-tab a.active {
    background:#787878;
    color:#0E67FF;
}

.single-tab{ 
    display: inline-block;  
    margin-right: 3% ;
    text-align: Left;
    font-weight: bold;

}

此部分的 html 如下所示:(请注意，这是使用 inspect 元素从网页中提取的，因为 HTML 是使用 shopifys .liquid 模板编写的。

<div class="product-description rte" itemprop="description">
  <p>Main Description</p>
  <p><strong>My titles here</strong><br> then some more description 
    <div class="tab-area">
        <ul class="tabs">
           <li class="single-tab">
             <a    href="#tab1" class="active" data-activator="#tab1">
               <h5><strong>First Tab</strong></h5>
             </a>
           </li>
           <li class="single-tab">
             <a href="#tab2" data-activator="#tab2" class="">
               <h5><strong>Second Tab</strong></h5>
             </a>
           </li>
        </ul>
     <div class="tab-content" id="tab1" style="display: block;">
        <p>Some mor info here</p></div><div class="tab-content" id="tab2"     style="display: none;">
        <ul>
            <li>some line content here</li>
        </ul>

您可能会说，我对此很陌生，我假设我不需要我设置的所有类，因为有些类会覆盖其他类，但这不是重点。我正在寻找的是一种更改事件选项卡文本颜色的方法。如果事件选项卡已经被选中，我也不希望它突出显示为不同的颜色。这甚至可以在 CSS 中完成，还是我需要 jQuery 才能完成？任何想法都表示赞赏。

Answer 1

因此，根据我从示例中收集到的信息(我查看了您提供的链接的结果)，为 h5 提供其属性的类是 .tabs li a.active h5

但是，这在您的 CSS 示例中不存在。您的选择器 .single-tab a.active 可以重写或重写为 .single-tab a.active h5。这将选择当前事件的 anchor 选项卡的 h5。

然后您可以使用 color 和/或 background-color 属性更改该 h5 的颜色和/或背景。

希望对您有所帮助。