根據鏈接點擊更改div的內容

Question

簡單地說，我想要通過jQuery更改div的類，點擊<a>元素，具體取決於匹配ID 您應該知道我沒有在JavaScript/jQuery和我的代碼一起搜索。

這個想法是月份和默認內容的列表。如果您點擊一個月，則會顯示特定月份的內容並隱藏默認內容。

我與我的情況codepen：http://codepen.io/garrthes/pen/oXqzdL

我扯下這個代碼，但它不會在我的情況下工作：（！非常感謝你，JoshBlackwood）http://codepen.io/JoshBlackwood/pen/yoLBJ

我不不知道這是否相關，但我想在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'); 
    }); 
});