Jquery if div hasClass 对另一个 div 做某事

Question

这是我的问题（除了我是 javascript 的初学者）。我正在构建一个页面，该页面将使用选项卡插件将 ajax 内容加载到 HTML 页面中。我们只需要构建一个必须承载大量内容的页面。一切正常，但我们需要使用 javascript 进行一些改进。

第一组是选项卡 (ul.tabs) 第二组是内容占位符 (div.panel-container) 第三组是弹出层 (div#popup)

<div id="ajax-tab-container" class='tab-container'>

    <ul class='tabs'>
        <li class='tab'><a href="file.html #section-one" data-target="#one" class="index">one</a></li>
        <li class='tab'><a href="file.html #section-two" data-target="#two" class="blue">two</a></li>
        <li class='tab'><a href="file.html #section-three" data-target="#three" class="green">three</a></li>
    </ul>

    <div class='panel-container'>
        <div id="one" class="active"></div>
        <div id="two"></div>
        <div id="three"></div>
    </div>

    <div id="#popup">
        <div class="one-ph">Content</div>
        <div class="two-ph">Content</div>
        <div class="three-ph">Content</div>
    </div>

现在基于哪个选项卡处于活动状态，当前脚本设置活动状态。现在我需要做的是创建一个脚本来检查（hasClass）.panel-container hasClass“活动”中的哪个div。但是它应该在 div#popup 中向 div 添加类。但他们必须匹配。

所以如果 div#one hasClass "active" 然后 addClass 到 div.one-ph, 如果 div#two hasClass "active" 然后 addClass 到 div.two-ph 等。

现在在这个例子中只有三个，但完成的文档将有大约 20 个。有人帮我创建这个，我几乎尝试了每个例子，但都不起作用。此外，这不是一个点击功能，而是一个应该可以在文档就绪时工作的功能。

请帮助这个绝望的家伙

Answer 1

更新

Fiddle

jQuery(document).ready(function() {
    jQuery('.panel-container > div.active').each(function() {
        var id = jQuery(this).attr('id');
        var target = '.' + id + '-ph';
        jQuery(target).addClass('active');
    });
    
    jQuery('ul.tabs > li.tab a').click(function(e) {
        e.preventDefault();
        var target = jQuery(this).attr('data-target');
        var targetPopup = '.' + target.replace('#', '') + '-ph';
        jQuery('.panel-container .active, #popup .active').removeClass('active');
        jQuery(target).addClass('active');
        jQuery(targetPopup).addClass('active');
        
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="ajax-tab-container" class='tab-container'>
    
    <ul class='tabs'>
        <li class='tab'><a href="file.html #section-one" data-target="#one" class="index">one</a></li>
        <li class='tab'><a href="file.html #section-two" data-target="#two" class="blue">two</a></li> 
        <li class='tab'><a href="file.html #section-three" data-target="#three" class="green">three</a></li>
    </ul>
    
    <div class='panel-container'>
        <div id="one" class="active"></div>
        <div id="two"></div>
        <div id="three"></div>
    </div>

    <div id="popup">
        <div class="one-ph">Content</div>
        <div class="two-ph">Content</div>
        <div class="three-ph">Content</div>
    </div>
</div>