Question

我需要有关使用onclick功能更改内容的帮助。

我有一个包含3个链接的表格，如下所示;

<table class="galerimenu" name="gallerytype">
    <tr>
        <td ><a href="#" class="tattoo">Tattoo</a></td>
        <td ><a href="#" class="piercing">Piercing</a></td>
        <td ><a href="#" class="makeup">Makeup</a></td>
    </tr>
  </table>


The content that i need to call is a thumbnail gallery in div like ;

<div class="banner" id="tattoo">
    <ul>
         <li>
            <ul id='da-thumbs' class='active-da-thumbs da-thumbs'>
                <li>
                  <a class="swipebox" data-title="Image Title" href="demo/1.jpg">
                  <img src="demo/1.jpg" alt="image" /></a>
                 </li>
                 <li>
                  <a class="swipebox" data-title="Image Title" href="demo/1.jpg">
                  <img src="demo/1.jpg" alt="image" /></a>
                 </li>
                 <li>
                  <a class="swipebox" data-title="Image Title" href="demo/1.jpg">
                  <img src="demo/1.jpg" alt="image" /></a>
                 </li>
    </ul>
      </li>
  </div>

<div class="banner" id="piercing" style="display:none;">
    <ul>
         <li>
            <ul id='da-thumbs' class='active-da-thumbs da-thumbs'>
                <li>
                  <a class="swipebox" data-title="Image Title" href="demo/1.jpg">
                  <img src="demo/1.jpg" alt="image" /></a>
                 </li>
                 <li>
                  <a class="swipebox" data-title="Image Title" href="demo/1.jpg">
                  <img src="demo/1.jpg" alt="image" /></a>
                 </li>
                 <li>
                  <a class="swipebox" data-title="Image Title" href="demo/1.jpg">
                  <img src="demo/1.jpg" alt="image" /></a>
                 </li>
    </ul>
      </li>
  </div>

<div class="banner" id="makeup" style="display:none;">
    <ul>
         <li>
            <ul id='da-thumbs' class='active-da-thumbs da-thumbs'>
                <li>
                  <a class="swipebox" data-title="Image Title" href="demo/1.jpg">
                  <img src="demo/1.jpg" alt="image" /></a>
                 </li>
                 <li>
                  <a class="swipebox" data-title="Image Title" href="demo/1.jpg">
                  <img src="demo/1.jpg" alt="image" /></a>
                 </li>
                 <li>
                  <a class="swipebox" data-title="Image Title" href="demo/1.jpg">
                  <img src="demo/1.jpg" alt="image" /></a>
                 </li>
    </ul>
      </li>
  </div>

我知道刺穿和纹身div需要在开始时显示为无。需要一个简单的js来调用和隐藏3个div。谢谢你的帮助！

Js代码是;

 $(function() {
        $('#gallerytype').change(function(){
            $('.banner').hide();
            $('#' + $(this).val()).show();
        });
    });

Answer 1

这样的事情应该有效：

$('a.tattoo').click( function() {
    $('#tattoo').toggle();
});

Answer 2

$('.tattoo').click(function () {
    $('.banner').hide();
    $('#tattoo').show();
});
$('.piercing').click(function () {
    $('.banner').hide();
    $('#piercing').show();
});
$('.makeup').click(function () {
    $('.banner').hide();
    $('#makeup').show();
});

<强> DEMO

Javascript - 使用onclick更改div内容

2 个答案: