Question

我的页面上有一个按钮，可以切换前视图：

<div id="toggleFrontView">
    <span class="cats"><i class="fa fa-tags"></i> Stöbern</span>
    <span class="search active"><i class="fa fa-search"></i> Suchen</span>
</div>

我现在要做的是从某个地方创建一个链接到切换视图“Stöbern”的html链接。

像这样：

<a href="#toggleFrontView">link</a>

不幸的是，这会滚动到锚点，但不会切换视图。有人可以帮忙吗？

由于 FLO

Answer 1

使用Javascript或JQuery。你不能只用HTML和CSS做到这一点。在jquery中有一个切换显示方法...... （网上有很多例子。只需在提问之前进行搜索）

<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>

<div id="toggleFrontView">toggle section</div>

<div id="clk">click me</div>

<script>
   $( "#clk" ).click(function() {
      $("#toggleFrontView").toggle();
   });
</script>

Answer 2

是的，你是对的。它背后有一些棱角分明。不幸的是我不明白。这是：

// Search / cats home
        setTimeout(function () {
            $('#searchBase').addClass('vis');
        }, 500)

        $('#toggleFrontView .cats').click(function () {

            var toggle = $('#toggleFrontView .cats'),
                searchBtn = toggle.find('.search'),
                catBtn = toggle.find('.cats'),
                filterCats = $('#filterCategories'),
                searchHead = $('#searchHead'),
                searchBase = $('#searchBase'),
                catItem = $('.catItem');

            toggle.addClass('active');
            $('#toggleFrontView .search').removeClass('active');

            filterCats.addClass('vis');
            searchBase.removeClass('vis');
            searchBtn.addClass('vis');
            //catBtn.addClass('hidden');

            searchHead.find('h1').removeClass('vis');
            searchHead.find('h2').addClass('vis');

            loop_();
            function loop_() {
                animateIn = setTimeout(function () {

                    $(catItem[0]).addClass('vis');
                    catItem.splice(0, 1);

                    if (catItem.length != 0) {

                        loop_();
                    }

                }, 50);
            }

        });


        $('#toggleFrontView .search').click(function () {

            var toggle = $('#toggleFrontView .search'),
                searchBtn = toggle.find('.search'),
                catBtn = toggle.find('.cats'),
                filterCats = $('#filterCategories'),
                searchHead = $('#searchHead'),
                searchBase = $('#searchBase');
            catItem = $('.catItem');

            toggle.addClass('active');
            $('#toggleFrontView .cats').removeClass('active');


            clearTimeout(animateIn);

            filterCats.removeClass('vis');
            catItem.removeClass('vis');
            searchBase.addClass('vis');
            searchBtn.removeClass('vis');
            //catBtn.removeClass('hidden');

            searchHead.find('h1').addClass('vis');
            searchHead.find('h2').removeClass('vis');

        });

        $scope.onImgLoad = function () {
            wall.fitWidth();
        };

Direkt Link to ID＆amp;带有html / css的类

2 个答案: