根据链接点击更改div的内容

时间：2015-07-03 18:52:10

标签： javascript jquery wordpress onclick

就是这样，我想通过jQuery更改div的类，点击<a>元素，具体取决于匹配的ID 你应该知道我没有使用JavaScript / jQuery，我的代码也是用Google搜索的。

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

我根据自己的情况编写了一个代码：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');
    });
});

1 个答案:

答案 0 :(得分：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');
    }); 
});
相关问题
最新问题