Question

我有一个onClick函数，它显示/隐藏多个div，具体取决于你点击的div。如何使用计时器自动运行，每5秒更改一次，以及使用onClick？欢迎任何建议，谢谢！

$(document).ready(function($){

  $('.showSection').on('click', function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    $('.targetSection').hide();
    $('#div' + $(this).data('target')).show();
}); 
    $('.showSection').first().click();
});

这是一个小提琴： https://jsfiddle.net/8qw05um1/

Answer 1

<!-- Page Wrap -->
<div class="pagewrap">
<!-- Header -->
<div class="header">
<img src="images/Logo.jpg" width="530" height="180" alt=""/>
</div>
<!-- Header end -->

<!-- Sidebar -->
<div class="sidebartitle">
<center style="color: #FFFFFF">Specials</center>
</div>
<div class="sidebar">
<center>
<div class="page-popper">

          </div>
<table width="187" height="196" border="0" align="center">
    <tbody>
      <tr>
        <td><div class="buttonImageWrapper">
<img src="images/M-2.jpg" alt=""/>
</div></td>
        <td>
        <a href="/appointment.html">Request an Appointment</a></td>
      </tr>
      <tr>
        <td><div class="buttonImageWrapper">
        <img src="images/M-2.jpg" alt=""/>
        </div></td>
        <td><a href="/pdf/Salon-Menu.pdf">Salon Menu</a></td>
      </tr>
      <tr>
        <td><div class="buttonImageWrapper"><img src="images/M-2.jpg" alt=""/></div></td>
        <td><a href="/pdf/Spa-Menu.pdf">Spa Menu</a></td>
      </tr>
      <tr>
        <td><div class="buttonImageWrapper"><img src="images/M-2.jpg" alt=""/></div></td>
        <td><a href="/bridal-services.html">Bridal Services</a></td>
      </tr>
      <tr>
        <td><div class="facebookImageWrapper"><img src="images/facebook-logo.png" width="48" height="48"></div></td>
        <td><a href="">Like us on Facebook</a></td>
      </tr>
      </tbody>
  </table>
  </center>
</div>
<!-- Sidebar end -->

<!-- Content -->
<div class="contenttitle">
<center style="color: #FFFFFF">Welcome</center>
</div>
<div class="content">
    <!-- Picture Slider -->
    <table width="350" border="0" cellpadding="2" cellspacing="2">
            <tr>
              <td align="left" valign="top"><div id="p7IRM_1" class="p7IRM01">
                <div id="p7IRMow_1" class="p7IRMowrapper">
                  <div id="p7IRMw_1" class="p7IRMwrapper">
                    <div id="p7IRMdv_1" class="p7IRMdv"><a class="p7IRMlink" id="p7IRMlk_1" title=""><img class="p7IRMimage" src="../images/new/slide-show1/000.jpg" alt="000" name="p7IRMim_1" width="350" height="233" id="p7IRMim_1" /></a></div>
                    <div id="p7IRMdsw_1" class="p7IRMdesc_wrapper">
                      <div class="p7IRMdesc_close"><a id="p7IRMdsclose_1" href="javascript:;" title="Hide Description"><em>Hide</em></a></div>
                      <div id="p7IRMds_1" class="p7IRMdesc">&nbsp;</div>
                    </div>
                    <div id="p7IRMdsopw_1" class="p7IRMdesc_open_wrapper">
                      <div id="p7IRMdsop_1" class="p7IRMdesc_open"><a id="p7IRMdsopen_1" href="javascript:;" title="Show Description"><em>Show</em></a></div>
                    </div>
                  </div>
                </div>
                <ul id="p7IRMlist_1" class="p7IRMlist">
                  <li><a href="../images/new/slide-show1/000.jpg">000</a></li>
                  <li><a href="../images/new/slide-show1/001.jpg">001</a></li>
                  <li><a href="../images/new/slide-show1/002.jpg">002</a></li>
                  <li><a href="../images/new/slide-show1/003.jpg">003</a></li>
                  <li><a href="../images/new/slide-show1/004.jpg">004</a></li>
                  <li><a href="../images/new/slide-show1/005.jpg">005</a></li>
                  <li><a href="../images/new/slide-show1/006.jpg">006</a></li>
                  <li><a href="../images/new/slide-show1/007.jpg">007</a></li>
                </ul>
                <!--[if IE 5.000]>
<style>.p7IRMdesc_wrapper {position:static !important;visibility:visible !important;}.p7IRMdesc_open_wrapper, .p7IRMdesc_close {display: none;}.p7IRMpaginator {position: static !important;height: 3em;}.p7IRMpaginator li, .p7IRMpaginator a {float: left !important;}.p7IRMpaginator a {float: left !important;overflow: visible !important;}</style>
<![endif]-->
                <!--[if lte IE 6]>
<style>.p7IRMpaginator a {width: auto !important;}</style>
<![endif]-->
                <!--[if lte IE 7]>
<style>.p7IRMpaginator li {display: inline !important;margin-right: 3px !important;}.p7IRMpaginator {zoom: 1;}</style>
<![endif]-->
                <script type="text/javascript">P7_opIRM('p7IRM_1',1,1,1,3000,4000,1,0,1,0,1500,0,0);</script>
              </div></td>
            </tr>
          </table>
    <!-- Picture Slider end -->
    <p><strong></strong><br />
         <br />
<br />
        </p>
        <p><a href="salon-services.html">Salon Services</a> | <a href="spa-services.html">Spa Services</a> | <a href="spa-packages.html">Spa Packages</a> | <a href="bridal-services.html">Bridal Services</a> | <a href="about-us.html">About Us</a> | <a href="contact-us.html">Contact Us</a></p>
    </div>
    <!-- Content end -->

Answer 2

试试这个，它会遍历div，但也允许你点击进行更改。由于我将点击功能分解为可用于点击或间隔的功能，因此如果您想要不同的行为，可以更改它。

font-size="0"

如何将setTimeout添加到OnClick函数中显示/隐藏多个div

2 个答案: