2

你好，我有一个网站，我正在为这个网站工作，我正在制作三个面板，当它们被点击时，你可以把它想象成一个翻转卡的概念。我一切正常，但我意识到，因为 div 本身被包裹在一个锚标记中，并且显示了“块”。我所拥有的是里面的内容，它们是指向外部页面的链接，但由于 div 是可点击的，它只读取该锚点。我尝试使用 z-index 但这似乎并没有帮助。

这是我的标记：什么是 ElectedFace？ 

<div class="flip_content"  id="flip1">
 <div class="content-info">
  <h5 style="text-align:center; font-size:20px; margin:3px 0 0 0; font-family:Arial, Helvetica, sans-serif;"><span class="blue">Elected</span><span class="red">face</span></h5>
  <p>electedface is America's free social network delivering more real time news, faster   than any other website.</p>
  <p>electedface connects subscribers to their elected officials with active electedface accounts</p>

<p>electedface empowers subscribers to share their voice and turn social networking into constructive civil action.</p>
  </div>
</div>

<a href="#" class="flip_switch" data-content_container="#flip2" data-flip_container="#flip_box2">
<div class="flipbox" id="flip_box2">
   <h4>Getting Started</h4>
</div>
</a>

 <div class="flip_content" id="flip2">
 <div class="content-info">
  <p> There are three ways to connect:</p>
     <p><a href="http://google.com">Read top news stories</a> and <a href="http://google.com">Read local news stories</a></p>
     <p><a href="http://google.com">Connect to your elected officials and start a group in your community</a></p>
     <p><a href="http://google.com">Register for free membership</a></p>
     </div>
</div>
<a href="#" class="flip_switch" data-content_container="#flip3" data-flip_container="#flip_box3">
<div class="flipbox" id="flip_box3">
   <h4>Next Steps</h4>
</div>
</a>
 <div class="flip_content" id="flip3">
 <div class="content-info">
  <p>Elected officials: activate your electedface account, connect to your electorate, and enlist supporters.</p>
  </div>
</div>

这是我的 Javascript

    <script type="text/javascript">
        $(function(){
           $('.flip_switch').bind("click",function(){
              var element = $(this);
              var content = element.data("content_container");
              var flip_container = element.data("flip_container");
              var active_flipbox = $('.activeFlip');

              if(element.hasClass('activeFlip')){
                  //If the flipbox is already flipped
                  flip_container.revertFlip();  
              }
              else{
                  if(active_flipbox){
                    //Revert active flipbox
                    active_flipbox.revertFlip();
                    //Remove active status
                    active_flipbox.removeClass('activeFlip');
                  }
                  $(flip_container).flip({
                    direction: 'rl',
                    color: '#c8cbce',
                    content: $(content).html(),
                    speed:100,
                    onBefore: function(){
                      $(flip_container).addClass('activeFlip'); 
                    }  
                  });
              }

               return false;  
           });      
        });
    </script>
4

1 回答 1

0

在我看来你的问题就是所谓的bubbling

你需要的是（很可能:)：http: //api.jquery.com/event.stopPropagation/

于 2012-11-20T15:40:19.800 回答