Question

我正在尝试链接到Magento Enterprise中的特定标签。似乎我发现的所有答案都不适用于他们的方法。我只需要一个指向该页面的链接来提取特定的选项卡。这是他们使用的代码：

Enterprise.Tabs = Class.create();
Object.extend(Enterprise.Tabs.prototype, {
 initialize: function (container) {
    this.container = $(container);
    this.container.addClassName('tab-list');
    this.tabs = this.container.select('dt.tab');
    this.activeTab = this.tabs.first();
    this.tabs.first().addClassName('first');
    this.tabs.last().addClassName('last');
    this.onTabClick = this.handleTabClick.bindAsEventListener(this);
    for (var i = 0, l = this.tabs.length; i < l; i ++) {
        this.tabs[i].observe('click', this.onTabClick);
    }
    this.select();
},
handleTabClick: function (evt) {
    this.activeTab = Event.findElement(evt, 'dt');
    this.select();
},
select: function () {
    for (var i = 0, l = this.tabs.length; i < l; i ++) {
        if (this.tabs[i] == this.activeTab) {
            this.tabs[i].addClassName('active');
            this.tabs[i].style.zIndex = this.tabs.length + 2;
            /*this.tabs[i].next('dd').show();*/
            new Effect.Appear (this.tabs[i].next('dd'), { duration:0.5 });
            this.tabs[i].parentNode.style.height=this.tabs[i].next('dd').getHeight() + 15 + 'px';
        } else {
            this.tabs[i].removeClassName('active');
            this.tabs[i].style.zIndex = this.tabs.length + 1 - i;
            this.tabs[i].next('dd').hide();
        }
    }
}
});

有人有想法吗？

Answer 1

我会考虑修改课程的启动方式。

initialize: function (container) {
    this.container = $(container);
    this.container.addClassName('tab-list');
    this.tabs = this.container.select('dt.tab');
// change starts here //
    var hashTab = $(window.location.hash.slice(1));
    this.activeTab = ( this.tabs.include(hashTab) ? hashTab : this.tabs.first());
// change ends here //
    this.tabs.first().addClassName('first');
    this.tabs.last().addClassName('last');
    this.onTabClick = this.handleTabClick.bindAsEventListener(this);
    for (var i = 0, l = this.tabs.length; i < l; i ++) {
        this.tabs[i].observe('click', this.onTabClick);
    }
    this.select();
}

在这里，我只更改了初始选项卡的选择方式。它会检查 URL片段，这通常称为哈希，如果它标识了预选的其中一个选项卡。作为奖励，如果可能，浏览器也会滚动到该元素。

然后，您只需将标签的ID附加到URL即可。例如，您可以通过;

生成URL

$productUrl = Mage::getUrl('catalog/product/view', array(
    'id' => $productId,
    '_fragment' => 'tab_id',
));

Answer 2

如果您最近从早期的Magento版本迁移，例如从Enterprise 1.11到Enterprise 1.12，确保/template/catalog/product/view.phtml中的javascript 生成选项卡的foreach后更新到1.12版本：

<script type="text/javascript">
        var collateralTabs = new Enterprise.Tabs('collateral-tabs');
        Event.observe(window, 'load', function() {
            collateralTabs.select();
        });
</script>

surfimp的非常有用的建议否则不会产生所需的关闭标签的打开。添加此更新的javascript后，点击链接阅读产品页面上的评论或添加您的评论，跳转到评论标签，即使该标签已被隐藏。

Answer 3

与Zifius的回答类似，你可以修改initialize函数，只需要另一个参数作为活动标签。

Event.observe(window, 'load', function() {
    new Enterprise.Tabs('collateral-tabs', $('tab_review'));
});

然后在scripts.js中（或者这个类可能存在的地方）

initialize: function (container, el) {
    ...
    this.activeTab = el;
    ...
}

使用您喜欢的模板中的任何逻辑将“el”设置为所需的值。

我这样做的原因是因为当我使用Zifius的方法时，所需的选项卡将是活动选项卡，但默认选项卡的内容仍然显示。

Answer 4

我昨天做了同样的任务而且我不知道原型很多，我通过添加另一种方法来解决它：

selectTab: function (element) {
    this.activeTab = element;
    this.select();
},

用法：

var Tabs = new Enterprise.Tabs('collateral-tabs');
Tabs.selectTab($('tabId'));

想知道这是否是正确的方法

Magento Enterprise选项卡 - 如何选择链接中的特定选项卡？

4 个答案: