织梦滑动门调用方法是什么？-织梦建站-盈思创科技

使用织梦自带的“内容选项卡”标签（最简单、最推荐）

这是织梦系统内置的功能,无需编写复杂的JS代码，非常适合新手和追求效率的用户。

（图片来源网络，侵删）

核心标签： {dede:arclist} + {dede:loop} + {dede:php}

适用场景： 调用不同栏目下的内容，制作一个多栏目的内容切换效果。

操作步骤：

在模板中插入HTML结构 在你需要放置滑动门的位置，写入下面的HTML代码，这个结构包含了标题栏（.tab-hd区（.tab-bd）。

<div class="sliding-tabs">
    <!-- 标题/导航部分 -->
    <ul class="tab-hd">
        <li class="active"><a href="#">国内新闻</a></li>
        <li><a href="#">国际新闻</a></li>
        <li><a href="#">科技资讯</a></li>
    </ul>
    <!-- 内容部分 -->
    <div class="tab-bd">
        <!-- 内容面板 1 -->
        <div class="tab-panel active">
            {dede:arclist typeid='1' row='5' titlelen='30'}
            <li><a href="[field:arcurl/]">[field:title/]</a></li>
            {/dede:arclist}
        </div>
        <!-- 内容面板 2 -->
        <div class="tab-panel">
            {dede:arclist typeid='2' row='5' titlelen='30'}
            <li><a href="[field:arcurl/]">[field:title/]</a></li>
            {/dede:arclist}
        </div>
        <!-- 内容面板 3 -->
        <div class="tab-panel">
            {dede:arclist typeid='3' row='5' titlelen='30'}
            <li><a href="[field:arcurl/]">[field:title/]</a></li>
            {/dede:arclist}
        </div>
    </div>
</div>

说明：

（图片来源网络，侵删）

typeid='1', typeid='2'：这里填入你要调用的栏目ID，你需要提前在后台找到对应栏目的ID。
row='5'：表示每个栏目调用5条文章。
titlelen='30'显示30个字符。
.tab-panel.active：默认显示第一个内容面板。

添加CSS样式 在你的CSS文件中（通常是 /templets/你的模板/style.css），添加以下样式来美化滑动门。

.sliding-tabs { width: 500px; margin: 20px auto; border: 1px solid #ddd; }
/* 标题栏样式 */
.tab-hd { list-style: none; padding: 0; margin: 0; background-color: #f5f5f5; border-bottom: 1px solid #ddd; overflow: hidden; }
.tab-hd li { float: left; }
.tab-hd li a { display: block; padding: 10px 20px; text-decoration: none; color: #333; }
.tab-hd li.active a { background-color: #fff; color: #007bff; font-weight: bold; }
/* 内容区样式 */
.tab-bd { padding: 15px; }
.tab-panel { display: none; } /* 默认隐藏所有面板 */
.tab-panel.active { display: block; } /* 显示激活的面板 */
.tab-panel li { list-style: none; margin-bottom: 8px; }
.tab-panel li a { text-decoration: none; color: #555; }
.tab-panel li a:hover { text-decoration: underline; }

添加JavaScript交互逻辑 这是实现“滑动”效果的关键，在页面底部，</body> 标签之前，添加以下JS代码。

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有标题项和内容面板
    const tabItems = document.querySelectorAll('.tab-hd li');
    const tabPanels = document.querySelectorAll('.tab-panel');
    // 为每个标题项添加点击事件
    tabItems.forEach(function(item, index) {
        item.addEventListener('click', function(e) {
            e.preventDefault(); // 阻止a标签的默认跳转行为
            // 1. 移除所有标题项的active类
            tabItems.forEach(i => i.classList.remove('active'));
            // 2. 为当前点击的标题项添加active类
            this.classList.add('active');
            // 3. 隐藏所有内容面板
            tabPanels.forEach(panel => panel.classList.remove('active'));
            // 4. 显示对应索引的内容面板
            tabPanels[index].classList.add('active');
        });
    });
});
</script>

这个方法非常直接，利用了织梦强大的标签，只需要HTML、CSS和少量JS即可实现。

使用第三方JS插件（功能更强大）

如果你需要更复杂的效果,比如自动轮播、平滑过渡动画等，可以使用成熟的JS插件，如 Swiper 或 Bootstrap Tabs。

这里以 Swiper 为例，它非常流行且功能强大。

操作步骤：

引入Swiper库 在你的模板文件头部（<head>标签内）或底部引入Swiper的CSS和JS文件，你可以使用CDN链接，或者下载到本地。

<!-- 引入Swiper的CSS -->
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css" />
<!-- 在页面底部引入Swiper的JS -->
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>

修改HTML结构 将你的HTML结构改为Swiper要求的格式。

<div class="swiper mySwiper">
    <!-- 分页器/导航按钮 -->
    <div class="swiper-pagination"></div>
    <div class="swiper-button-next"></div>
    <div class="swiper-button-prev"></div>
    <!-- 内容包装器 -->
    <div class="swiper-wrapper">
        <!-- 每一个滑动面板 -->
        <div class="swiper-slide">
            <h3>国内新闻</h3>
            {dede:arclist typeid='1' row='5' titlelen='30'}
            <p><a href="[field:arcurl/]">[field:title/]</a></p>
            {/dede:arclist}
        </div>
        <div class="swiper-slide">
            <h3>国际新闻</h3>
            {dede:arclist typeid='2' row='5' titlelen='30'}
            <p><a href="[field:arcurl/]">[field:title/]</a></p>
            {/dede:arclist}
        </div>
        <div class="swiper-slide">
            <h3>科技资讯</h3>
            {dede:arclist typeid='3' row='5' titlelen='30'}
            <p><a href="[field:arcurl/]">[field:title/]</a></p>
            {/dede:arclist}
        </div>
    </div>
</div>

添加CSS样式 你可以添加一些自定义CSS来美化Swiper。

.mySwiper {
    width: 600px;
    height: 300px;
    margin: 20px auto;
}
.swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.swiper-slide p a {
    display: block;
    margin: 5px 0;
    color: #333;
    text-decoration: none;
}

初始化Swiper 在页面底部，</body> 标签之前，添加JS代码来初始化轮播图。

<script>
  var swiper = new Swiper(".mySwiper", {
    pagination: {
      el: ".swiper-pagination",
    },
    navigation: {
      nextEl: ".swiper-button-next",
      prevEl: ".swiper-button-prev",
    },
    loop: true, // 循环模式
    autoplay: {
      delay: 3000, // 自动切换的时间间隔（毫秒）
      disableOnInteraction: false,
    },
  });
</script>

Swiper方法适合制作全屏轮播、产品展示等需要丰富视觉效果的场景，但需要引入外部库。

手动调用JS文件（自定义性强）

如果你不想用插件,想自己完全控制代码，可以采用这种方法，核心思路是写一个独立的JS文件，然后在模板中调用。

操作步骤：

创建JS文件 在你的模板目录下创建一个 js 文件夹，并在其中新建一个 tabs.js 文件，内容如下：

// tabs.js
function initTabs(containerId) {
    const container = document.getElementById(containerId);
    if (!container) return;
    const tabHd = container.querySelector('.tab-hd');
    const tabItems = tabHd.querySelectorAll('li');
    const tabBd = container.querySelector('.tab-bd');
    const tabPanels = tabBd.querySelectorAll('.tab-panel');
    tabItems.forEach((item, index) => {
        item.addEventListener('click', function(e) {
            e.preventDefault();
            // 移除所有激活状态
            tabItems.forEach(i => i.classList.remove('active'));
            tabPanels.forEach(p => p.classList.remove('active'));
            // 添加当前激活状态
            this.classList.add('active');
            tabPanels[index].classList.add('active');
        });
    });
}
// 当DOM加载完成后，初始化所有滑动门
document.addEventListener('DOMContentLoaded', function() {
    // 你可以给滑动门容器设置一个id，然后在这里初始化
    // initTabs('my-sliding-tabs');
    // 或者，自动查找所有带有'sliding-tabs'类的元素并初始化
    const allTabContainers = document.querySelectorAll('.sliding-tabs');
    allTabContainers.forEach(container => {
        initTabs(container.id || 'tab-container-' + Math.random().toString(36).substr(2, 9));
    });
});

在模板中调用 在你的模板文件中，引入这个JS文件。
```

<script src="{dede:global.cfg_templeturl/}/js/tabs.js"></script>
```
然后使用方法一的HTML和CSS结构即可。

这种方法代码结构更清晰，便于复用和后期维护，适合有一定JS基础的用户。

总结与建议

方法	优点	缺点	适用场景
自带标签	简单、快速、无需额外文件	功能单一，动画效果有限	简单的文章列表切换、栏目展示
JS插件	功能强大、效果丰富、响应式	需要引入外部库，可能影响加载速度	全屏轮播、产品展示、复杂交互
手动JS	代码可控、可复用、轻量	需要自己编写JS，对新手有门槛	多个页面需要相同效果，追求代码整洁

对于大多数织梦用户来说,方法一已经足够满足日常需求，并且是官方支持的“标准做法”，强烈推荐从它开始，如果你需要酷炫的轮播效果，再考虑使用方法二。

织梦滑动门调用方法是什么？

使用织梦自带的“内容选项卡”标签（最简单、最推荐）

操作步骤：

使用第三方JS插件（功能更强大）

操作步骤：

手动调用JS文件（自定义性强）

操作步骤：

总结与建议

相关文章

目录[+]