JQuery вопрос об этом - PullRequest
Новая
       2

JQuery вопрос об этом

0 голосов
/ 19 ноября 2010

У меня есть этот код 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 странице.

Ответы [ 2 ]

1 голос
/ 19 ноября 2010

Это не прямой ответ, но вы должны рассмотреть возможность использования существующих решений, таких как http://jqueryui.com/demos/tabs/

или использовать любой плагин, например: http://plugins.jquery.com/project/SmartTab

ps.Я знаю, что изобретать танец - это весело, я сам много делаю :)

0 голосов
/ 19 ноября 2010 
<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>

Равный мой совет: не изобретай заново извини за меня английский

...