怎么把这两段合并为一个方法呢？他们结构是一样的

roro5119 2015-10-15 12:29:56

结构：
.s-content >.tab
.s-content >.inner
想要的结果是在不同大层里点击tab切换对应顺序的inner



  	 //网址tab

  	 var wTag=$("#s_nall_tabs a");

  	 wTag.each(function(){

  	 		$(this).click(function(i){

  	 			wTag.removeClass("tab-on");

  	 				var index=$("#s_nall_tabs a").index(this);

  	 				$(this).addClass("tab-on");

  	 				$("#s_nall_tabs_con .inner").hide();

  	 				$("#s_nall_tabs_con .inner").eq(index).show();

  	 		})

  	 });



  	   	 //网址tab

  	 var sTag=$(".s-gbuy-hd a");

  	 sTag.each(function(){

  	 		$(this).click(function(i){

  	 			sTag.removeClass("tab-on");

  	 				var index=$(".s-gbuy-hd a").index(this);

  	 				$(this).addClass("tab-on");

  	 				$(".s-gbuy .inner").hide();

  	 				console.log(index);

  	 				$(".s-gbuy .inner").eq(index).show();

  	 		})

  	 });

...全文

90 6 打赏收藏转发到动态举报

写回复

用AI写文章

6 条回复

切换为时间正序

请发表友善的回复…

发表回复

roro5119 2015-10-15

打赏
举报

引用 3 楼 wuqinfei_cs 的回复:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Tab</title>
</head>
<body>
    <style>
        .tab-on { background-color: green; }
    </style>
    <div class="s-content">

        <div class="tab">
            <a class="tab-on" href="#" id="tab-1">Tab-1</a>
            <a href="#" id="tab-2">Tab-2</a>
            <a href="#" id="tab-3">Tab-3</a>
        </div>

        <div class="inner" data-for="tab-1">
            <p>tab-1 content!</p>
        </div>
        <div class="inner" data-for="tab-2" style="display: none;">
            <p>tab-2 content!</p>
        </div>
        <div class="inner" data-for="tab-3" style="display: none;">
            <p>tab-3 content!</p>
        </div>

    </div>

    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>
    <script>

        $( ".s-content .tab a" ).click( function () {

            var tabIndex = $( this ).index();

            $( this ).addClass( "tab-on" ); // 给点击的 tab 加上 “.tab-on”
            $( this ).siblings().removeClass( "tab-on" ); // 其他的 tab 去掉 “.tab-on”

            $( ".s-content .inner" ).hide().eq( tabIndex ).show();

        } );

    </script>

</body>
</html>

这个当页面有多个s-content 就不行了的

roro5119 2015-10-15

打赏
举报


var wTag=$(".s-content .tab");
       wTag.each(function(){
               $(this).click(function(i){
                       var p=$(this).parents(".s-content");
                       var tabs=p.find(".tab");
                       var index=tabs.index(this);
                       tabs.removeClass("tab-on");
                       $(this).addClass("tab-on");
                       p.find(".inner").hide();
                       p.find(".inner").eq(index).show();
               })
       });

再修理好点~

forwardNow 2015-10-15

打赏
举报



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Tab</title>

</head>

<body>

    <style>

        .tab-on { background-color: green; }

    </style>



    <div class="s-content">



        <div class="tab">

            <a class="tab-on" href="#" id="tab-1">Tab-1</a>

            <a href="#" id="tab-2">Tab-2</a>

            <a href="#" id="tab-3">Tab-3</a>

        </div>



        <div class="inner" data-for="tab-1">

            <p>tab-1 content!</p>

        </div>

        <div class="inner" data-for="tab-2" style="display: none;">

            <p>tab-2 content!</p>

        </div>

        <div class="inner" data-for="tab-3" style="display: none;">

            <p>tab-3 content!</p>

        </div>



    </div>

    <div class="s-content">



        <div class="tab">

            <a class="tab-on" href="#" id="tab-1">Tab-1</a>

            <a href="#" id="tab-2">Tab-2</a>

            <a href="#" id="tab-3">Tab-3</a>

        </div>



        <div class="inner" data-for="tab-1">

            <p>tab-1 content!</p>

        </div>

        <div class="inner" data-for="tab-2" style="display: none;">

            <p>tab-2 content!</p>

        </div>

        <div class="inner" data-for="tab-3" style="display: none;">

            <p>tab-3 content!</p>

        </div>



    </div>

    <div class="s-content">



        <div class="tab">

            <a class="tab-on" href="#" id="tab-1">Tab-1</a>

            <a href="#" id="tab-2">Tab-2</a>

            <a href="#" id="tab-3">Tab-3</a>

        </div>



        <div class="inner" data-for="tab-1">

            <p>tab-1 content!</p>

        </div>

        <div class="inner" data-for="tab-2" style="display: none;">

            <p>tab-2 content!</p>

        </div>

        <div class="inner" data-for="tab-3" style="display: none;">

            <p>tab-3 content!</p>

        </div>



    </div>



    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>

    <script>



        $( ".s-content .tab a" ).click( function () {



            var tabIndex = $( this ).index();



            $( this ).addClass( "tab-on" ); // 给点击的 tab 加上 “.tab-on”

            $( this ).siblings().removeClass( "tab-on" ); // 其他的 tab 去掉 “.tab-on”



            // $( ".s-content .inner" ).hide().eq( tabIndex ).show();



            $( this ).parents( ".s-content" ).find( ".inner" ).hide().eq( tabIndex ).show();





        } );



    </script>



</body>

</html>

forwardNow 2015-10-15

打赏
举报



<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Tab</title>

</head>

<body>

    <style>

        .tab-on { background-color: green; }

    </style>

    <div class="s-content">



        <div class="tab">

            <a class="tab-on" href="#" id="tab-1">Tab-1</a>

            <a href="#" id="tab-2">Tab-2</a>

            <a href="#" id="tab-3">Tab-3</a>

        </div>



        <div class="inner" data-for="tab-1">

            <p>tab-1 content!</p>

        </div>

        <div class="inner" data-for="tab-2" style="display: none;">

            <p>tab-2 content!</p>

        </div>

        <div class="inner" data-for="tab-3" style="display: none;">

            <p>tab-3 content!</p>

        </div>



    </div>



    <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script>

    <script>



        $( ".s-content .tab a" ).click( function () {



            var tabIndex = $( this ).index();



            $( this ).addClass( "tab-on" ); // 给点击的 tab 加上 “.tab-on”

            $( this ).siblings().removeClass( "tab-on" ); // 其他的 tab 去掉 “.tab-on”



            $( ".s-content .inner" ).hide().eq( tabIndex ).show();



        } );



    </script>



</body>

</html>

roro5119 2015-10-15

打赏
举报

引用 1 楼 slwsss 的回复:

var wTag=$("#s_nall_tabs a,.s-gbuy-hd a"); wTag.each(function(){ $(this).click(function(i){ wTag.removeClass("tab-on"); var index=$("#s_nall_tabs a").index(this); $(this).addClass("tab-on"); $("#s_nall_tabs_con .inner").hide(); $("#s_nall_tabs_con .inner").eq(index).show(); }) });

哇，原来可以这样。。。。我感动哭了要。。。。谢谢 ~

slwsss 2015-10-15

打赏
举报

var wTag=$("#s_nall_tabs a,.s-gbuy-hd a"); wTag.each(function(){ $(this).click(function(i){ wTag.removeClass("tab-on"); var index=$("#s_nall_tabs a").index(this); $(this).addClass("tab-on"); $("#s_nall_tabs_con .inner").hide(); $("#s_nall_tabs_con .inner").eq(index).show(); }) });