2015-04-17 113 views
0

我試圖在點擊鏈接時隱藏或顯示div內容。我試圖使用http://jsfiddle.net/fXE9p/ 中使用的相同方法,但仍然無法正常工作。單擊網格內的鏈接時隱藏並顯示div內容

<body> 
    Click a button to make it visible:<br /><br /> 
    <a href="#" class="one">One</a> 
    <a href="#" class="two">Two</a> 
    <a href="#" class="three">Three</a> 
    <a href="#" class="four">Four</a><br /><br /> 

    <div id="one">One</div> 
    <div id="two">Two</div> 
    <div id="three">Three</div> 
    <div id="four">Four</div><br/><br/> 
</body> 
$("div").hide(); 
// Show chosen div, and hide all others 
$("a").click(function (e) { 
    //e.preventDefault(); 
    $("#" + $(this).attr("class")).show().siblings('div').hide(); 
}); 

我試圖做的是發生在網格塊的鏈接,一旦用戶點擊該廣告的div的內容會顯示(內容包括表單字段)。因爲網格不工作嗎?

這是我的代碼 HTML:

<div role="main" class="ui-content"> 

      <fieldset> 
         <div class="ui-grid-a"> 
          <div class="ui-block-a" id="conGridOne"><a href="#" class="linkA">Block A</a></div> 
          <div class="ui-block-b" id="conGridTwo"><a href="#contactTabTwo">block B</a></div> 
         </div> 
      </fieldset> 
       <div id="linkA"> 
        <p>This is block one</p> 
       </div> 
       <div id="id2" class="tabContent" data-href="contactTabTwo"> 
        <h1>this is block two</h1>    
       </div>         


    </div> 

的jQuery:

$("a.linkA").click(function(e){ 
    e.preventDefault(); 
    $("#" + $(this).attr("class")).show(); 
    }); 

CSS:

#linkA{ 

display: none; 

}

是的,我已經掛了jQuery我^ h tml文件如下:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" /> 
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script> 
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
+2

請包括您所使用的代碼,該代碼提供它一樣的jsfiddle和工作正常。 –

+0

您是否在您的網頁中添加了對jquery的引用? – Vim

回答

0

簡單來說就是給div分配一個class:block;並在默認情況下將div設置爲display:none;編輯:

編輯:沒有意識到,你想隱藏其他divs時,點擊一個。 div { display:none; }

</style> 
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script> 
    </head> 
<body> 
    <body> 
Click a button to make it visible:<br /><br /> 
<a href="#" class="one">One</a> 

<a href="#" class="two">Two</a> 
<a href="#" class="three">Three</a> 
<a href="#" class="four">Four</a><br /><br /> 
<div id="one">One</div> 
<div id="two">Two</div> 
<div id="three">Three</div> 
<div id="four">Four</div><br/><br/> 
</body> 
<script> 
$("a").click(function() { 
$("#"+this.className).siblings("div").hide(); 
    $("#"+this.className).show(); 
}); 
    </script> 
</body> 
</html> 

編輯 CodePen鏈接補充說: http://codepen.io/DeveloperKnowledge/pen/KpPgbL

0

確保你有你的腳本標籤jQuery的。我寧願將它們放在</body>標籤之前。

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> 

你可以在這裏找到最新的jQuery CDN: http://jquery.com/download/