已更新

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中的哪个div hasClass为“active”。但是它应该将div添加到div＃pop中的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>

Jquery如果div hasClass用其他div做某事

1 个答案:

已更新