使用Javascript从div获取信息

时间:2017-03-14 18:52:22

标签: javascript jquery wordpress

我正在尝试将this fiddle上共享的代码用于Wordpress,但Javascript不起作用。除了上面的那个,我没有其他的js文件。 它适用于示例,但不适用于Wordpress。



$(function() {
  $('ul.eevmonths a').on('click', function() {
    $month = $(this).attr('class'),
      $('.eevcontent-' + $month).siblings().addClass('eevhide');
    $('.eevcontent-' + $month).removeClass('eevhide');
  });
});

a {
  text-decoration: underline;
  cursor: pointer;
  color: blue;
}

.eevhide {
  display: none;
}

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

<div class="eventmobile">
  <ul class="eevmonths">
    <li><a class="jan">1</a></li>
    <li><a class="feb">2</a></li>
    <li><a class="mar">3</a></li>
  </ul>
</div>

<div id="eevcontent">
  <div class="eevdefault-text">Default Text</div>

  <div class="eevcontent-jan eevhide">
    <h3>Januar</h3>
  </div>
  <div class="eevcontent-feb eevhide">
    <h3>Februar</h3>
  </div>
  <div class="eevcontent-mar eevhide">
    <h3>März</h3>
  </div>
</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

你最常在你的HTML文件中包含jQuery,如下面的脚本标记 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

&#13;
&#13;
$(function(){
    $('ul.eevmonths a').on('click', function () {
        $month = $(this).attr('class'),
        $('.eevcontent-'+$month).siblings().addClass('eevhide');
        $('.eevcontent-'+$month).removeClass('eevhide');
    }); 
});
&#13;
a{
    text-decoration:underline;
    cursor:pointer;
    color: blue;
}           
    .eevhide {
      display: none;
    }
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="eventmobile">
    <ul class="eevmonths">
    	<li><a class="jan">1</a></li>
    	<li><a class="feb">2</a></li>
    	<li><a class="mar">3</a></li>
    </ul>
    </div>
    
    <div id="eevcontent">
        <div class="eevdefault-text">Default Text</div>
    
        <div class="eevcontent-jan eevhide">
        <h3>Januar</h3>
        </div>
        <div class="eevcontent-feb eevhide">
        <h3>Februar</h3>
        </div>
        <div class="eevcontent-mar eevhide">
        <h3>März</h3>
        </div>
    </div>
&#13;
&#13;
&#13;