切换类（.toggle class）是否可行？

Question

切换类（.toggle class）是否可行？

3

我在这里上传我的问题：我的问题示例我的问题是：是否有可能在页面加载后（或刷新后）首先显示“内容B def”，而不修改任何顺序？

<a> href="..." C </a>
<a> href="..." B </a>
<a> href="..." A </a>

我希望按照 C B A 的顺序来排列，不要是 B C A 或者 B A C。

我的 javascript 知识基础比较简单，但是我正在快速提升中。

很抱歉我的英语不太好，

非常感谢您的建议！我已经为这个问题苦恼了几天。

HTML 代码：

    <html>
   <head>
      <meta content="charset=utf-8" />
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
      <script defer src="js/swap.js"></script> 
   </head>
   <body>
      <div>
         <div id="view-c" class="swap-cont">
            <h1>content C xyz</h1>
         </div>
         <div id="view-a" class="swap-cont">
            <h1>content A abc</h1>
         </div>
         <div id="view-b" class="swap-cont">
            <h1>content B def</h1>
         </div>
         <div class="toggle">
            <a href="#view-c">C</a>
            <a href="#view-b">B</a>
            <a href="#view-a">A</a>
         </div>
      </div>
   </body>
</html>

swap.js:

    $(function() {
    var toggles = $('.toggle a'),
        codes = $('.swap-cont');

    toggles.on("click", function(event) {
        event.preventDefault();
        var $this = $(this);

        if (!$this.hasClass("active")) {
            toggles.removeClass("active");
            $this.addClass("active");
            codes.hide().filter(this.hash).show();
        }
    });
    toggles.first().click();
});

- pawel

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michal Klouda · Accepted Answer

您只需要更改脚本的最后一行，从以下内容： ```

``` 变为： ```

``` 即可。

toggles.first().click();

to:

toggles.eq(1).click();

这行代码通过触发默认锚点的点击事件来初始化您的视图。

您之前点击了第一个锚点，即C。B实际上是第二个，因此您需要使用.eq()方法，该方法选择集合中的第n个元素，文档记录在这里。

另一种（更简洁的）方法是将defaultAnchor类添加到默认锚点，并修改脚本：

 $('.defaultAnchor').click();