Question

您好我想在 ProductPriceRating 类中仅显示第一个div测试，我想隐藏div的其余部分。任何人都可以帮助我。

<div class="ProductPriceRating">
            <strong>$47.00</strong>
            
            <div class="test"><input type="button" class="btn" id="hello_123" onclick="window.open('1234')" value="test.com">
            <div class="test"><input type="button" class="btn" id="hello_123" onclick="window.open('1234')" value="test.com"></div>
            <div class="test"><input type="button" class="btn" id="hello_123" onclick="window.open('1234')" value="test.com"></div>
            <div class="test"><input type="button" class="btn" id="hello_123" onclick="window.open('1234')" value="test.com"></div>
            <div class="test"><input type="button" class="btn" id="hello_123" onclick="window.open('1234')" value="test.com"></div>
  </div>

Answer 1

您首先</div>错过了.test，而您的代码将是

$(document).ready(function() {
  $('.ProductPriceRating .test:first-of-type').addClass('active');
})

.test {
  display: none;
}
.test.active {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="ProductPriceRating">
  <strong>$47.00</strong>

  <div class="test">
    <input type="button" class="btn" id="hello_123" onclick="window.open('1234')" value="test.com">
  </div>
  <div class="test">
    <input type="button" class="btn" id="hello_123" onclick="window.open('1234')" value="test.com1">
  </div>
  <div class="test">
    <input type="button" class="btn" id="hello_123" onclick="window.open('1234')" value="test.com">
  </div>
  <div class="test">
    <input type="button" class="btn" id="hello_123" onclick="window.open('1234')" value="test.com">
  </div>
  <div class="test">
    <input type="button" class="btn" id="hello_123" onclick="window.open('1234')" value="test.com">
  </div>
</div>

每页不要多次使用相同的ID！

Answer 2

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Dean Flint Real Estate!</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="stylesheet/main.css" id="main" media="screen and (min-width: 800px)" type="text/css" />
<link rel="stylesheet" href="stylesheet/mini.css" id="mini" media="screen and (max-width: 799px)"  type="text/css" />
<style type="text/css">
#cycler{ position:relative; width: 100%; max-width: 5472px;min-width: 359px; float:left; display: table}
#cycler img{position:absolute;z-index:1;width: 100%; max-width: 5472px;min-width: 359px; height: auto;; text-align: center;box-shadow: 3px 2px 6px  #333333; float:left}
#cycler img.active{z-index:3; width: 100%; max-width: 5472px;min-width: 359px; height: auto;text-align: center;opacity: 100; float:left}
</style>
</head>
<body id="mainbody">
<nav>
<div id="topnav" class="mainnav">
<div id="linktable" class="listlink">
<ul>
<li><a href="index.html" class="current">HOME</a></li>
<li><a href="agents.html" class="other">AGENTS</a></li>
<li><a href="featured.html" class="other">FEATURED LISTINGS</a></li>
<li><a href="current.html" class="other">CURRENT LISTINGS</a></li>
<li><a href="aboutus.html" class="other">ABOUT US</a></li>
<li><a href="contactus.html" class="other">CONTACT US</a></li>
</ul>
</div>
</div>
</nav>
<header>
<div id="namebar" class="topname"><img src="images/temp/dfrelogo.jpg" class="dfrelogo" /></div>
</header>
<section>
<div id="cycler">
<img src="images/front_page/frontimage.jpg" />
<img src="images/front_page/frontimage2.jpg" class="active" />
<img src="images/front_page/frontimage3.jpg" />
</div>
</section><br />
<footer>
<div style="position: relative;" ><p>This text should go UNDER the above pictures</p></div>
</footer>
<script type="text/javascript">
function cycleImages(){
      var $active = $('#cycler .active');
      var $next = ($active.next().length > 0) ? $active.next() : $('#cycler img:first');
      $next.css('z-index',2);//move the next image up the pile
      $active.fadeOut(1500,function(){//fade out the top image
          $active.css('z-index',1).show().removeClass('active');//reset the z-index and unhide the image
          $next.css('z-index',3).addClass('active');//make the next image the top one
      });
    }

$(document).ready(function(){
// run every 4s
setInterval('cycleImages()', 6000);
})</script>
</body>
</html>

想要使用Jquery仅显示<div>中的第一个类

2 个答案: