Question

我有一个标签脚本，它可以工作，但只有当我点击链接而不是当我点击主div时，所以如果你点击一个区域外的标签更改但不显示正确的内容，我新的jquery所以请不要对我这么辛苦，我认为这是一个菜鸟问题:(

这是jQuery：

$(document).ready(function () {

    /* ____tabs menu (en gradient)____ */
    function changetabs(elemtab){
        /* by default estate */
        elemtab.first().addClass('on_tab');
        elemtab.first().next().find('a').css('border-left-color','transparent');
        /*add class on active */
        elemtab.click(function(){
            elemtab.removeClass('on_tab');
            $(this).addClass('on_tab');
            /*change border*/
            elemtab.find('a').css('border-left-color','#0086c3');
            $(this).next().find('a').css('border-left-color','transparent');
            $(this).find('a').css('border-color','transparent');
        });
    }


    var my_elem = $('.list_tabs .prod_tab');
    changetabs(my_elem);


    /* call */
    var my_elem1 = $('.container_menu .list_tabs .tab');
    var my_elem2 = $('container_menu2 .list_tabs .tab');
    changetabs(my_elem1);
    changetabs(my_elem2);


    // change tabs' content
    $(function() {
        $('a').click(function(){
            $(this).parents().siblings(".content_menu").children().hide();
            $(this).parents().siblings(".content_menu").children($(this).attr('href')).show();

        });
    });

这是HTML

<div class="list_tabs">
                    <div class="tab"><div><a href="#tabs-1">xxxxxxx</a></div></div>
                    <div class="tab"><div><a href="#tabs-2">xxxxxxxx</a></div></div>
                    <div class="tab"><div><a href="#tabs-3">xxx</a></div></div>
                </div>
                <!-- aqui va todo tu contenido -->
                <div class="content_menu">
                     <div id="tabs-1" style="display:block">
                        <p>tab1 Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus nec arcu. </p>
                    </div>
                    <div id="tabs-2" style="display:none">
                        <p>tab2 aaaaaaaaaaa</p>
                    </div>
                    <div id="tabs-3" style="display:none">
                        <p> tab3 eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
                    </div>
                </div>

我试图将（'a'）更改为（'。tab'），但它没有成功。

这是小提琴：jsfiddle.net/s6JtB

Answer 1

它应该是：

$(function() {
    $('.tab').click(function(){
        $(this).siblings(".content_menu").children().hide();
        $(this).siblings(".content_menu").children($(this).attr('href')).show();

    });
});

您不需要.parent()

Answer 2

最后我找到了一个解决方案，我给了一个包含the的div的类，并且我对脚本进行了一些修改。

这是重要的部分:(。hola只是一个测试类）

$(function() {
    $('.list_tabs .tab').click(function(){
        var href = $(this).find('a').attr('href'); 
        $(this).parents().siblings(".content_menu").children().hide();
        $(this).parents().siblings(".content_menu").children(href).show();

    });
});

现在正在使用div。

点击div上的更改标签，而不是<a></a>

2 个答案: