0

私はこのコードを持っています、それは明らかにul>li>Menuである回転メニューのために働きます。

私が知りたいのは、rot7などの特定のリストアイテムの関数をトリガーする方法(onClick、HRefなど)です。

テキストの行をクリックして関数を起動したいのですが、これは可能ですか?

例「ここをクリックしてそこに行く」、

昔のように-{ahref="some.html"}ここをクリック{/a}ページが読み込まれます。

この場合、JQueryスクリプトのフォームと関数を使用して、テキストで7番目のli>メニュー項目を開く必要があります。

そこに、泥のように澄んでいます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <title>Bridgett's Electrolysis</title>
        <!-- Favorite Icon --><link rel="shortcut icon" href="images/beLogoColor3D.png" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/><link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
        <link href="css/jquery-ui.css" rel="stylesheet" type="text/css" />
        <style>
            *{
                margin:0;
                padding:0;
            }
            body{
                font-family:Arial;
            }
            #content{
                margin:150px auto 10px auto;
            }
            .reference{
                clear:both;
                width:800px;
                margin:30px auto;
            }
            .reference p a{
                text-transform:uppercase;
                text-shadow:1px 1px 1px #fff;
                color:#666;
                text-decoration:none;
                font-size:10px;
            }
            .reference p a:hover{
                color:#333;
            }
            </style>
        <script type="text/javascript">
            // EDITED 
            $(function () {
                $('#link6').click(function () {
                    $('#rotmenu li:nth-child(6)').click();
                });
            });
        </script>
    </head>
        <body>
        <div class="logoback">
            <div id="logo">
                <img src="images/beWebLogoColor3D.png" height="250">
            </div>
        </div>
        <div id="content">
            <div class="rotator">
                <div class="myh">STOP  TWEEZING  UNWANTED  HAIR.....FOREVER!!!</div>
                <ul id="rotmenu">
                    <li>
                        <a href="rot1" class="mytabs">Home</a>
                        <div style="display:none;">
                            <div class="info_image">1.jpg</div>
                            <div class="info_heading">Relax</div>
                            <div class="info_description">
                                <div class="myh1">Eliminate Unwanted Hair</div><br />
                                <div class="col2"><img src="images/page1_img1.png" alt="" width="90%"></div>
                                <div class="col2">
                                    <span class="myh2">Safe, Permanent Hair Removal<br />
                                        <br />
                                        Electrolysis is:</span><br />
                                    <span class="myh3home">• Still the only true permanent hair removal method and the only
                                        permanent treatment recognized by the FDA<br />
                                        • An excellent solution for those discouraged by the unsuccessful results of temporary
                                        hair removal methods<br />
                                        • For everyone<br />
                                        • The preferred treatment for combating folliculitis<br />
                                        <br />
                                    </span> 
                                </div>   
                                <div id="mycenter" class="myh2"><a id="link6" href="javascript:;">Book now to schedule your Complimentary Consultation</a>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="rot2" class="mytabs">News</a>
                        <div style="display: none;">
                            <div class="info_image">2.jpg</div>
                            <div class="info_heading">The Scoop</div>
                            <div class="info_description">
                                <div class="col1">
                                    <img src="images/page2_img1.jpg" alt="" />
                                    <img src="images/appointment-request1.png" width="60%" alt="" />
                                    <img src="images/page2_img3.jpg" alt="" />
                                </div>
                                <div class="col3">
                                <div class="mytabs">Open at our new Location!</div>
                                    <span class="myh3">See our Location Section for a Map or Directions.</span><br /><br /><br /><br />
                                    <div class="mytabs">Online Appointment Booking is Now Available!</div>
                                    <span class="myh3">Go to our Appointments Section and schedule your appointment today.</span><br /><br /><br /><br />
                                    <div class="mytabs">All New Equipment!</div>
                                    <span class="myh3">The latest and greatest equipment has been installed to offer you the most comfortable Electrolysis experience.</span>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="rot3" class="mytabs">Services</a>
                        <div style="display:none;">
                            <div class="info_image">3.jpg</div>
                            <div class="info_heading">Here to Serve You</div>
                            <div class="info_description">
                                    <span class="mytabs">Electrolysis</span><br />
                                    <span class="myh3">These are the areas that Electrolysis can be performed on.</span><br />
                                    <img src="images/areas.png" / width="100%" height="350">
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="rot4" class="mytabs">Location</a>
                        <div style="display:none;">
                            <div class="info_image">4.jpg</div>
                            <div class="info_heading">Come and Visit</div>
                            <div class="info_description">
                                <span class="mytabs">1003 E. Broad St. Mansfield TX 76063</span>
                                <iframe width="100%" height="355px" seamless="seamless" frameborder="0" scrolling="no" marginheight="0"
                                    marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=1003+E+Broad+St,+Mansfield,+TX&amp;aq=2&amp;oq=1003+E+Broad&amp;sll=32.800447,-97.289319&amp;sspn=0.966172,1.783905&amp;t=m&amp;ie=UTF8&amp;hq=&amp;hnear=1003+E+Broad+St,+Mansfield,+Texas+76063&amp;ll=32.565228,-97.130527&amp;spn=0.007568,0.013937&amp;z=14&amp;output=embed">
                                </iframe>
                                <br />
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="rot5" class="mytabs">Contact Us</a>
                        <div style="display:none;">
                            <div class="info_image">5.png</div>
                            <div class="info_heading">Get in Touch</div>
                            <div class="info_description">
                                <div class="col1">
                                    <span class="mytabs">Contact Info:</span><br />
                                    <span class="myh3">Bridgett's Electrolysis<br />
                                        1003 E. Broad St<br />
                                        Mansfield, TX. 76063<br />
                                        Phone:(817)879-7817<br />
                                        email: <a href="mailto:bridgettselectro@gmail.com?subject=Info Request from your site">
                                            bridgettselectro@gmail.com</a><br />
                                    </span>
                                </div>
                                <div class="col3">
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="rot6" class="mytabs">FAQ</a>
                        <div style="display:none;">
                            <div class="info_image">6.png</div>
                            <div class="info_heading">Electrolysis Questions?</div>
                            <div class="info_description">
                                <Iframe src="faq/faq.htm" width="100%" height="400" frameborder="0" marginheight="0"></Iframe>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="rot7" class="mytabs">Appointment</a>
                        <div style="display:none;">
                            <div class="info_image">book.jpg</div>
                            <div class="info_heading">Book It</div>
                            <div class="info_description">
                                <Iframe src="webappt/index.php" width="100%" height="405" frameborder="0" marginheight="0"></Iframe>
                            </div>
                        </div>
                    </li>
                    <li>
                        <a href="rot8" class="mytabs">FaceBook</a>
                        <div style="display:none;">
                            <div class="info_image">like.png</div>
                            <div class="info_heading">Coment or Like Us</div>
                            <div class="info_description">
                                <div class="mycenter"><span class="myh2">Be Sure to Visit our <a href="javascript: void(0)" onclick="window.open('https://www.facebook.com/bridgettselectro', 'FanPage');">FaceBook FanPage</a> for deals and coupons!</span></div>
                                <div class="col2">
                                    <div class="fb-like", data-href="http://www.bridgettselectro.com" data-send="false" data-width="450" data-show-faces="true" data-colorscheme="dark" data-font="arial"></div>
                                </div>
                                <div class="col2">
                                    <div class="fb-comments" data-href="https://www.facebook.com/BridgettsElectrolysis?fref=ts" data-num-posts="10" data-width="350"  data-colorscheme="dark"></div>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
                <div id="rot1">
                    <img src="" width="800" height="300" class="bg" alt=""/>
                    <div class="heading">
                        <h1></h1>
                    </div>
                    <div class="description">
                        <p></p>
                    </div>    
                </div>
            </div>
        </div>
         <!-- The JavaScript -->
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
        <script src="js/atooltip.jquery.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                var current = 1;

                var iterate = function () {
                    var i = parseInt(current + 1);
                    var lis = $('#rotmenu').children('li').size();
                    if (i > lis) i = 1;
                    display($('#rotmenu li:nth-child(' + i + ')'));
                }
                display($('#rotmenu li:first'));
                var slidetime = setInterval(iterate, 3000000);

                $('#rotmenu li').bind('click', function (e) {
                    clearTimeout(slidetime);
                    display($(this));
                    e.preventDefault();
                });

                function display(elem) {
                    var $this = elem;
                    var repeat = false;
                    if (current == parseInt($this.index() + 1))
                        repeat = true;

                    if (!repeat)
                        $this.parent().find('li:nth-child(' + current + ') a').stop(true, true).animate({ 'marginRight': '-20px' }, 300, function () {
                            $(this).animate({ 'opacity': '0.7' }, 700);
                        });

                    current = parseInt($this.index() + 1);

                    var elem = $('a', $this);

                    elem.stop(true, true).animate({ 'marginRight': '0px', 'opacity': '1.0' }, 300);

                    var info_elem = elem.next();
                    $('#rot1 .heading').animate({ 'left': '-420px' }, 500, 'easeOutCirc', function () {
                        $('h1', $(this)).html(info_elem.find('.info_heading').html());
                        $(this).animate({ 'left': '0px' }, 400, 'easeInOutQuad');
                    });

                    $('#rot1 .description').animate({ 'bottom': '-425px' }, 500, 'easeOutCirc', function () {
                        $('p', $(this)).html(info_elem.find('.info_description').html());
                        $(this).animate({ 'bottom': '0px' }, 400, 'easeInOutQuad');
                    })
                    $('#rot1').prepend(
                    $('<img/>', {
                        style: 'opacity:0',
                        className: 'bg'
                    }).load(
                    function () {
                        $(this).animate({ 'opacity': '1' }, 600);
                        $('#rot1 img:first').next().animate({ 'opacity': '0' }, 700, function () {
                            $(this).remove();
                        });
                    }
                ).attr('src', 'images/' + info_elem.find('.info_image').html()).attr('width', '1200').attr('height', '500')
                );
                }
            });
            (function (d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s); js.id = id;
                js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
                fjs.parentNode.insertBefore(js, fjs);
            } (document, 'script', 'facebook-jssdk'));
        </script>
    </body>
</html>
4

1 に答える 1

0
  <a id="link6" href="javascript:;">click to open menu 6</a>


  <script>
  // EDITED 
  $(function() {   
    $('#link6').click(function(){
       $('#rotmenu li:nth-child(6)').click(); 
    });
   });
  </script>

編集:

上記のコードは機能しません。メニューが変更されるたび.descriptionに、元のタグを持つコンテナ()コンテンツが初期化時に設定されるため、aタグを含むページコンテンツは、前のコンテンツと同じ元のコンテンツによって上書きされますが、古いものをオーバーライドします。そのため、クリックハンドラーは機能しません。これは、オーバーライドされたアイテムに設定されているためです。

メニューがページを変更するたびにクリックハンドラーを設定しないようにするには、tahtのように単純なリンクにバインドする必要があります<a onclick="$('#rotmenu li:nth-child(6)').click();" href="javascript:;">Book now to schedule your Complimentary Consultation</a>。それだけです-正常に動作します。

于 2012-10-27T00:05:36.347 に答える