嘗試使用jQuery創建顯示/隱藏切換內容？

Question

所以我有一個鏈接列表，當點擊一個帶內容的div應該顯示時，很容易，但我的解決方案不工作，想法？

而且我這個夾道註釋掉，因爲林不知道我需要這個，因爲我已經隱藏，並通過改變他們的CSS類，（右？）

// $('').toggleClass(''); --- Not sure if I need this? AND how I'd use it?.. 

/* Service Panel - toggle */ 
 
(function($) { 
 

 
    $(document).ready(function() { 
 

 
     $(document).ready(function() { 
 
     // $('').toggleClass(''); --- Not sure if I need this? AND how I'd use it?.. 
 
     $('#family-law-item').click(function() { 
 
      $(".hide-other-desc").css({ 
 
      "display": "none" 
 
      }); 
 
      $(".family-law-desc").css({ 
 
      "display": "block" 
 
      }); 
 
     }); 
 
     $('#stock').click(function() { 
 
      $(".hide-other-desc").css({ 
 
      "display": "none" 
 
      }); 
 
      $(".criminal-law-desc").css({ 
 
      "display": "block" 
 
      }); 
 
     }); 
 
     $('#workshop').click(function() { 
 
      $(".hide-other-desc").css({ 
 
      "display": "none" 
 
      }); 
 
      $(".corporate-law-desc").css({ 
 
      "display": "block" 
 
      }); 
 
     }); 
 
     $('#all-courses').click(function() { 
 
      $(".hide-other-desc").css({ 
 
      "display": "none" 
 
      }); 
 
      $(".international-law-desc").css({ 
 
      "display": "block" 
 
      }); 
 
     }); 
 

 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<section class="services-panel"> 
 
    <nav class="services-items"> 
 
    <li id="family-law-item"><a href="#"> Family Law</a></li> 
 
    <li id="criminal-law-item"><a href="#"> Criminal Law</a></li> 
 
    <li id="corporate-law-item"><a href="#"> Corporate Law</a></li> 
 
    <li id="international-law-item"><a href="#"> International Law</a></li> 
 
    </nav> 
 
    <div class="service-desc-wrap"> 
 
    <article id="family-law-desc hide-other-desc"> 
 
     aaaaaaaaaaaaaaaaaaaaaaaaaaaaLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make 
 
     a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 
 
     more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br> 
 
    </article> 
 
    <article id="criminal-law-desc hide-other-desc"> 
 
     bbbbbbbbbbbbbbbbLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 
 
     book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently 
 
     with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br> 
 
    </article> 
 
    <article id="corporate-law-desc hide-other-desc"> 
 
     ccccccccccccccccccLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 
 
     book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently 
 
     with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br> 
 
    </article> 
 
    <article id="international-law-desc hide-other-desc"> 
 
     ddddddddddddddddddddddddddLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
 
     type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 
 
     more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br> 
 
    </article> 
 
    </div> 
 
</section>

顯示的div

Answer 1

1. 使用.hide()和.show()。
2. 將id更改爲class在您的HTML上的article標記中。
3. 更改您的jQuery選擇器以匹配您的鏈接。

您應該只有每個元素一個id和id應爲entire document獨特。

(function($) { 
 

 
    $('#family-law-item').click(function() { 
 
    $(".hide-other-desc").hide(); 
 
    $(".family-law-desc").show(); 
 
    }); 
 

 
    $('#criminal-law-item').click(function() { 
 
    $(".hide-other-desc").hide(); 
 
    $(".criminal-law-desc").show(); 
 
    }); 
 

 
    $('#corporate-law-item').click(function() { 
 
    $(".hide-other-desc").hide(); 
 
    $(".corporate-law-desc").show(); 
 
    }); 
 

 
    $('#international-law-item').click(function() { 
 
    $(".hide-other-desc").hide(); 
 
    $(".international-law-desc").show(); 
 
    }); 
 

 
}(jQuery));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<section class="services-panel"> 
 
    <nav class="services-items"> 
 
    <li id="family-law-item"><a href="#"> Family Law</a></li> 
 
    <li id="criminal-law-item"><a href="#"> Criminal Law</a></li> 
 
    <li id="corporate-law-item"><a href="#"> Corporate Law</a></li> 
 
    <li id="international-law-item"><a href="#"> International Law</a></li> 
 
    </nav> 
 
    <div class="service-desc-wrap"> 
 
    <article class="family-law-desc hide-other-desc"> 
 
     aaaaaaaaaaaaaaaaaaaaaaaaaaaaLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make 
 
     a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 
 
     more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br> 
 
    </article> 
 
    <article class="criminal-law-desc hide-other-desc"> 
 
     bbbbbbbbbbbbbbbbLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 
 
     book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently 
 
     with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br> 
 
    </article> 
 
    <article class="corporate-law-desc hide-other-desc"> 
 
     ccccccccccccccccccLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen 
 
     book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently 
 
     with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br> 
 
    </article> 
 
    <article class="international-law-desc hide-other-desc"> 
 
     ddddddddddddddddddddddddddLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a 
 
     type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and 
 
     more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br> 
 
    </article> 
 
    </div> 
 
</section>

至於.toggleClass()，它的工作原理是這樣的：

if the element does not have the class: 
    add the class 
if the element already has the class: 
    remove the class 

Answer 2

你可以試試下面的代碼：

<div id="dataDiv"> 
    <p>Hello How are you?</p> 
</div> 

<script> 
function toggle() 
{ 
    $('#dataDiv').toggle(); 
} 
</script> 

Answer 3

就可以實現，現在你的許多方式可以試試以下代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
<script> 
$(document).ready(function() { 
    $('.services-items a').click(function(){ 
     $('.service-desc-wrap article').hide(); 
     $($(this).attr('href')).show(); 
     return false 
    }) 
}) 

<body> 
<style> 
.hide { display:none;} 
</style> 
<section class="services-panel"> 
<nav class="services-items"> 
    <li id="family-law-item"><a href="#family-law-desc"> Family Law</a></li> 
    <li id="criminal-law-item"><a href="#criminal-law-desc"> Criminal Law</a></li> 
    <li id="corporate-law-item"><a href="#corporate-law-desc"> Corporate Law</a></li> 
    <li id="international-law-item"><a href="#international-law-desc"> International Law</a></li> 
</nav> 
<div class="service-desc-wrap"> 
    <article id="family-law-desc"> 
     aaaaaaaaaaaaaaaaaaaaaaaaaaaaLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>   
    </article> 
    <article id="criminal-law-desc" class="hide"> 
     bbbbbbbbbbbbbbbbLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>   
    </article> 
    <article id="corporate-law-desc" class="hide"> 
     ccccccccccccccccccLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>   
    </article> 
    <article id="international-law-desc" class="hide"> 
     ddddddddddddddddddddddddddLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.<br>   
    </article>   
    </div> 
</section> 
</body> 
</html>