根据 link 次点击更改 div 的内容

Question

很简单，我想通过 jQuery 更改 div 的 class，单击 <a> 元素，具体取决于匹配的 ID 你应该知道我在 JavaScript/jQuery 方面没有经验，我的代码是一起用谷歌搜索的。

想法是月份列表和默认内容。如果您单击某个月份，它会显示特定月份的内容并隐藏默认内容。

我根据自己的情况做了一个codepen：http://codepen.io/garrthes/pen/oXqzdL

我抄袭了这段代码，但它在我的情况下不起作用：http://codepen.io/JoshBlackwood/pen/yoLBJ（非常感谢你，JoshBlackwood！）

我不知道这是否相关，但我想运行在 Wordpress 中使用它。 jQuery 库在 Wordpress 中加载。

我认为错误出在 JS 中...

非常感谢！

HTML

    <div class="eventmobile">
<ul class="eevmonths">
    <li><a href="#eevcontent">1</a></li>
    <li><a href="#eevcontent">2</a></li>
    <li><a href="#eevcontent">3</a></li>
    <li><a href="#eevcontent">4</a></li>
    <li><a href="#eevcontent">5</a></li>
    <li><a href="#eevcontent">6</a></li>
    <li><a href="#eevcontent">7</a></li>
    <li><a href="#eevcontent">8</a></li>
    <li><a href="#eevcontent">9</a></li>
    <li><a href="#eevcontent">10</a></li>
    <li><a href="#eevcontent">11</a></li>
    <li><a href="#eevcontent">12</a></li>
</ul>
</div>
<div class="eventtablet">
<ul class="eevmonths">
    <li><a href="#eevcontent">Jan</a></li>
    <li><a href="#eevcontent">Feb</a></li>
    <li><a href="#eevcontent">Mär</a></li>
    <li><a href="#eevcontent">Apr</a></li>
    <li><a href="#eevcontent">Mai</a></li>
    <li><a href="#eevcontent">Jun</a></li>
    <li><a href="#eevcontent">Jul</a></li>
    <li><a href="#eevcontent">Aug</a></li>
    <li><a href="#eevcontent">Sep</a></li>
    <li><a href="#eevcontent">Okt</a></li>
    <li><a href="#eevcontent">Nov</a></li>
    <li><a href="#eevcontent">Dez</a></li>
</ul>
</div>
<div class="eventlarge">
<ul class="eevmonths">
    <li><a href="#eevcontent">Januar</a></li>
    <li><a href="#eevcontent">Februar</a></li>
    <li><a href="#eevcontent">März</a></li>
    <li><a href="#eevcontent">April</a></li>
    <li><a href="#eevcontent">Mai</a></li>
    <li><a href="#eevcontent">Juni</a></li>
    <li><a href="#eevcontent">Juli</a></li>
    <li><a href="#eevcontent">August</a></li>
    <li><a href="#eevcontent">September</a></li>
    <li><a href="#eevcontent">Oktober</a></li>
    <li><a href="#eevcontent">November</a></li>
    <li><a href="#eevcontent">Dezember</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 class="eevcontent-apr eevhide">
<h3>April</h3>
</div>
<div class="eevcontent-mai eevhide">
<h3>Mai</h3>
</div>
<div class="eevcontent-jun eevhide">
<h3>Juni</h3>
</div>
<div class="eevcontent-jul eevhide">
<h3>Juli</h3>
</div>
<div class="eevcontent-aug eevhide">
<h3>August</h3>
</div>
<div class="eevcontent-sep eevhide">
<h3>September</h3>
</div>
<div class="eevcontent-okt eevhide">
<h3>Oktober</h3>
</div>
<div class="eevcontent-nov eevhide">
<h3>November</h3>
</div>
<div class="eevcontent-dez eevhide">
<h3>Dezember</h3>
</div>
</div>

CSS

@media only screen and (max-width: 450px){
  .eventtablet{
    display:none;
  }
  .eventlarge{
    display:none;
  }
}

@media only screen and (max-width: 1259px) and (min-width:451px){
  .eventmobile{
    display:none;
  }
  .eventlarge{
    display:none;
  }
}
@media only screen and (min-width: 1260px){
.eventmobile{
  display:none;
}
.eventtablet{
  display:none;
}
}

.eevhide {
  display: none;
}

JS

$(document).ready(function ($) {

$('ul.eevmonths > a').click(function () {
        var $this = $(this),
            $id = $this.attr('sid'),
            $class = '.' + $('.eevcontent-' + $id).attr('class').replace('eevhide', '');
        $('.eevdefault-text').addClass('eevhide');
        $('.eevcontent-' + $id).removeClass('eevhide');
        $('div[class*=eevcontent]').not($class).addClass('eevhide');
    });
});

Answer 1

好的，伙计，我想通了你的问题，我对 HTML/JQUERY 做了一些更改，因为它完全是一团糟。应该很容易理解，但如果您有任何问题，请随时提问

https://jsfiddle.net/bpjk8174/3/

HTML

<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>
    <li><a class="apr">4</a></li>
    <li><a class="mai">5</a></li>
    <li><a class="jun">6</a></li>
    <li><a class="jul">7</a></li>
    <li><a class="aug">8</a></li>
    <li><a class="sep">9</a></li>
    <li><a class="okt">10</a></li>
    <li><a class="nov">11</a></li>
    <li><a class="dez">12</a></li>
</ul>
</div>
<div class="eventtablet">
<ul class="eevmonths">
    <li><a class="jan">Jan</a></li>
    <li><a class="feb">Feb</a></li>
    <li><a class="mar">Mär</a></li>
    <li><a class="apr">Apr</a></li>
    <li><a class="mai">Mai</a></li>
    <li><a class="jun">Jun</a></li>
    <li><a class="jul">Jul</a></li>
    <li><a class="aug">Aug</a></li>
    <li><a class="sep">Sep</a></li>
    <li><a class="okt">Okt</a></li>
    <li><a class="nov">Nov</a></li>
    <li><a class="dez">Dez</a></li>
</ul>
</div>
<div class="eventlarge">
<ul class="eevmonths">
    <li><a class="jan">Januar</a></li>
    <li><a class="feb">Februar</a></li>
    <li><a class="mar">März</a></li>
    <li><a class="apr">April</a></li>
    <li><a class="mai">Mai</a></li>
    <li><a class="jun">Juni</a></li>
    <li><a class="jul">Juli</a></li>
    <li><a class="aug">August</a></li>
    <li><a class="sep">September</a></li>
    <li><a class="okt">Oktober</a></li>
    <li><a class="nov">November</a></li>
    <li><a class="dez">Dezember</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 class="eevcontent-apr eevhide">
    <h3>April</h3>
    </div>
    <div class="eevcontent-mai eevhide">
    <h3>Mai</h3>
    </div>
    <div class="eevcontent-jun eevhide">
    <h3>Juni</h3>
    </div>
    <div class="eevcontent-jul eevhide">
    <h3>Juli</h3>
    </div>
    <div class="eevcontent-aug eevhide">
    <h3>August</h3>
    </div>
    <div class="eevcontent-sep eevhide">
    <h3>September</h3>
    </div>
    <div class="eevcontent-okt eevhide">
    <h3>Oktober</h3>
    </div>
    <div class="eevcontent-nov eevhide">
    <h3>November</h3>
    </div>
    <div class="eevcontent-dez eevhide">
    <h3>Dezember</h3>
    </div>
</div>

JQUERY

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

根据 link 次点击更改 div 的内容

Change content of div based on link click

javascript

wordpress

jquery

onclick