Question

我有这个javascript代码：

<script type="text/javascript">
        $(document).ready(function(){
            //Set the selector in the first tab
            $("#blokken .links .tabmenu span:first",this).addClass("selector");


            //Basic hover action
            $(".links .tabmenu span").mouseover(function(){
                $(this).addClass("hovering");
            });
            $(".links .tabmenu span").mouseout(function(){
                $(this).removeClass("hovering");
            });             

            //Add click action to tab menu
            $(".links .tabmenu span",this).click(function(){
                //Remove the exist selector
                $(".selector").removeClass("selector");
                //Add the selector class to the sender
                $(this).addClass("selector");

                //Find the width of a tab
                var TabWidth = $(".TabContent:first").width();
                if(parseInt($(".TabContent:first").css("margin-left")) > 0)
                    TabWidth += parseInt($(".TabContent:first").css("margin-left"));
                if(parseInt($(".TabContent:first").css("margin-right")) >0)
                    TabWidth += parseInt($(".TabContent:first").css("margin-right"));
                //But wait, how far we slide to? Let find out
                var newLeft = -1* $("span").index(this) * TabWidth;
                //Ok, now slide
                $(".AllTabs").animate({
                    left: + newLeft + "px"
                },1000);
            });
        });
    </script>

我有html

<div class="links">
                    <div class="tabmenu">           
                        <span class="managementmodellen">Managementmodellen</span>
                        <span class="cursus">Cursus</span>
                        <span class="apps">Apps</span>
                    </div>

                    <div class="ContentFrame">
                        <div class="AllTabs">
                            <div class="TabContent">
                                <img src="content/img/voorbeeld/klok.png" alt="Timemanagement" width="105" height="105" />
                                <p><strong>Timemanagement</strong>
                                    Juist zaken die prioriteit hebben, schuiven we vaak op de lange baan. Waarom? Vaak gaat het om nieuwe en onbekende taken. We zien er tegenop ze 
                                    ter hand te nemen, vooral als het omvangrijke klussen zijn.
                                </p>
                            </div>
                            <div class="TabContent">
                                <img src="content/img/voorbeeld/klok.png" alt="Timemanagement" width="105" height="105" />
                                <p><strong>Timemanagement</strong>
                                    Juist zaken die prioriteit hebben, schuiven we vaak op de lange baan. Waarom? Vaak gaat het om nieuwe en onbekende taken. We zien er tegenop ze 
                                    ter hand te nemen, vooral als het omvangrijke klussen zijn.
                                </p>
                            </div>
                            <div class="TabContent">
                                <img src="content/img/voorbeeld/klok.png" alt="Timemanagement" width="105" height="105" />
                                <p><strong>Timemanagement</strong>
                                    Juist zaken die prioriteit hebben, schuiven we vaak op de lange baan. Waarom? Vaak gaat het om nieuwe en onbekende taken. We zien er tegenop ze 
                                    ter hand te nemen, vooral als het omvangrijke klussen zijn.
                                </p>
                            </div>
                        </div>
                    </div>
                </div>

我现在有一个jquery标签结构。但我不想在网站上有两个或更多标签。当我放在网站上时，有两个标签。所以我想放置两个但是当我在网站上放置两个标签（div class = links）时。比标签不好工作。当我点击两个标签结构。第一个标签也会出现。

我该如何解决这个问题？这可以超过1对1页。

Answer 1

这不是直接的答案，但您应该考虑使用现有的解决方案，例如http://jqueryui.com/demos/tabs/

或使用任何插件，例如：http://plugins.jquery.com/project/SmartTab

PS。我知道重新发明这件事很有趣 - 我自己也做了很多：）

Answer 2

<script type="text/javascript">
        $(document).ready(function(){
            //Set the selector in the first tab
            $("#blokken .links .tabmenu span:first",this).addClass("selector");


            //Basic hover action
            $(".links .tabmenu span").mouseover(function(){
                $(this).addClass("hovering");
            });
            $(".links .tabmenu span").mouseout(function(){
                $(this).removeClass("hovering");
            });             

            //Add click action to tab menu
            $(".links .tabmenu span",this).click(function(){
                // save THIS tab construction selector
                var thisTabs=$(this).closest(".link");
                //Remove the exist selector
                thisTabs.find(".selector").removeClass("selector");
                //Add the selector class to the sender
                $(this).addClass("selector");

                //Find the width of a tab
                var TabWidth = thisTabs.find(".TabContent:first").width();
                if(parseInt(thisTabs.find(".TabContent:first").css("margin-left")) > 0)
                    TabWidth += parseInt(thisTabs.find(".TabContent:first").css("margin-left"));
                if(parseInt(thisTabs.find(".TabContent:first").css("margin-right")) >0)
                    TabWidth += parseInt(thisTabs.find(".TabContent:first").css("margin-right"));
                //But wait, how far we slide to? Let find out
                // i really dont understand this line
                var newLeft = -1* thisTabs.find("span").index(this) * TabWidth;
                //Ok, now slide
                thisTabs.find(".AllTabs").animate({
                    left: + newLeft + "px"
                },1000);
            });
        });
    </script>

平等我的建议是不要重新发明轮子为我哭泣英语

关于“这个”的jquery问题

2 个答案: