我想让我的事件在点击时激活一个特定的标签(使用日历的idTabs和clndr.js)

时间:2015-04-24 09:45:43

标签: javascript jquery events tabs

enter image description here

我右侧有3个标签,左侧有日历。单击日历的数字(事件)时,我想要激活tab3。 idTabs似乎没有激活选项卡的方法,但我知道我们可以手动触发它,但不知道如何,我是js中的begginer。 这是我已经拥有的代码,它为我提供了特定标签3中事件的信息。

我的js

 $(document).ready(function () {



    $('#calendar').clndr({
        template: $('#calendar-template').html(),
        events: [
     { date: '2015-04-09', title: 'CLNDR GitHub Page Finished', url: 'http://github.com/kylestetz/CLNDR' },
     { date: '2015-04-19', title: 'CLNDR GitHub Page Finished', url: 'http://github.com/kylestetz/CLNDR' },
     { date: '2015-04-19', title: 'Event 2', url: 'http://github.com/kylestetz/CLNDR' },
     { date: '2015-04-19', title: 'Event 3', url: 'http://github.com/kylestetz/CLNDR' },
     { date: '2015-04-25', title: 'CLNDR GitHub Page Finished', url: 'http://github.com/kylestetz/CLNDR' }
  ],

        clickEvents: {
            click: function (target) {
                console.log(target);
                var output = "";
                for (i = 0; i < target.events.length; i++) {
                    output += " -> " + target.events[i].title + " <br /> ";
                }
                //alert("Events for day: " + target.date.toString() + " \n " + output);
                document.getElementById("tab3").innerHTML = "Events for day: " + target.date.toString() + " <br /> " + output;

            },
            onMonthChange: function (month) {
                console.log('you just went to ' + month.format('MMMM, YYYY'));
            }
        },
        doneRendering: function () {
            console.log('this would be a fine place to attach custom event handlers.');
        }
    });

我的HTML

            <div class="col-sm-8 col-md-8 MFCBlock"  id="tabsIndice">
                <ul class="menu_indice idTabs">
                     <li><a href="#tab1">Categorias</a></li>
                     <li><a href="#tab2">Comentários</a></li>
                     <li><a href="#tab3" id="tab_3">Eventos</a></li>
                </ul>
                <div class="menufull" id="tab1">
                    <ul class="categorias_list left_cat tabs" style="list-style:none;">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                    <ul class="categorias_list right_cat tabs">
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
                <div class="menufull" id="tab2">
                    <ul class="categorias_list left_cat tabs" style="list-style:none;">
                        <li><a href="#">City Tours & Sightseeing</a></li>
                        <li><a href="#">City Pass & Skip the Line Tickets</a></li>
                        <li><a href="#">Turisticos e seguir a excursão no ônibus seguinte</a></li>
                        <li><a href="#">Tour Noturnos</a></li>
                        <li><a href="#">Cruzeiros com jantar</a></li>
                    </ul>
                </div>
                    <div class="menufull" id="tab3">
                        <ul class="categorias_list left_cat tabs" style="list-style:none;">
                            <li><a href="#">City Tours & Sightseeing</a></li>
                            <li><a href="#">City Pass & Skip the Line Tickets</a></li>
                            <li><a href="#">Turisticos e seguir a excursão no ônibus seguinte</a></li>
                            <li><a href="#">Tours de Segway e de Caminhada</a></li>
                            <li><a href="#">Viagens de um dia & Excursões para fora da cidade</a></li>
                        </ul>
                        <ul class="categorias_list right_cat tabs">
                            <li><a href="#">Tour Noturnos</a></li>
                            <li><a href="#">Cruzeiros com jantar</a></li>
                        </ul>
                    </div>
            </div>

在此先感谢,我真的很感激任何帮助。

0 个答案:

没有答案