Question

我的网站上有一个菜单栏，您可以使用它来查看实时预览（https://plains.cc/）。基本上，您可以单击菜单栏上的每个选项，但不会发生任何事情。原因是因为它们在我的代码中都处于相同的VAR下。我如何分隔每个标签，并使每个标签在Javascript中转到不同的链接我不熟悉这种语言。

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var TABS = ['Youtube', 'Steam', 'Twitter', 'Music'];

var Application = function (_React$Component) {
        _inherits(Application, _React$Component);

        function Application(props) {
                _classCallCheck(this, Application);

                var _this = _possibleConstructorReturn(this, (Application.__proto__ || Object.getPrototypeOf(Application)).call(this, props));

                _this.state = {
                        currentIndex: 0
                };

                _this.onClick = _this.onClick.bind(_this);
                return _this;
        }

        _createClass(Application, [{
                key: 'componentDidMount',
                value: function componentDidMount() {
                        var tabsWrapper = this.refs.tabs;
                        var tabsWrapperWidth = tabsWrapper.getBoundingClientRect().width;
                        var initTab = tabsWrapper.children[0];
                        var rightPercentage = (initTab.offsetLeft - 15 + initTab.getBoundingClientRect().width) * 100 / tabsWrapperWidth + '%';
                        var leftPercentage = (initTab.offsetLeft + 15) * 100 / tabsWrapperWidth + '%';

                        document.documentElement.style.setProperty('--left-side', leftPercentage);
                        document.documentElement.style.setProperty('--right-side', rightPercentage);
                }
        }, {
                key: 'componentWillUnmount',
                value: function componentWillUnmount() {
                        if (this.transitionTimer) {
                                clearTimeout(this.transitionTimer);
                        }
                }
        }, {
                key: 'onClick',
                value: function onClick(e) {
                        var currentIndex = this.state.currentIndex;

                        var index = parseInt(e.target.getAttribute('data-index'));

                        if (index === currentIndex) {
                                return;
                        }

                        this.setState({ currentIndex: index });
                }
        }, {
                key: 'renderTabs',
                value: function renderTabs() {
                        var _this3 = this;

                        var currentIndex = this.state.currentIndex;


                        return TABS.map(function (t, i) {
                                var className = 'tab';

                                if (i === currentIndex) {
                                        className += ' tab--active';
                                }

                                return React.createElement(
                                        'div',
                                        { className: className, key: i, 'data-index': i, onClick: _this3.onClick },
                                        t
                                );
                        });
                }
        }, {
                key: 'render',
                value: function render() {
                        return React.createElement(
                                'div',
                                { className: 'tabs', ref: 'tabs' },
                                this.renderTabs(),
                                React.createElement('div', { className: 'line', ref: 'line' })
                        );
                }
        }]);

        return Application;
}(React.Component);

ReactDOM.render(React.createElement(Application, null), document.getElementById('app'));

function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }

Answer 1

首先，在为元素提供超链接地址时，根本不需要任何外部JavaScript。

例如，你的div元素是这样的：

<div class="tab" data-index="0">Forums</div>

但你可以使用

<div class="tab" data-index="0"onclick="window.location= 'https://www.example.com';">Forums</div>

如果您点击它，这将使您的页面重定向到https://www.example.com。

现在，我对这个问题的理解是你希望页面打开一个新选项卡来打开链接。为此，您将使用window.open（）函数。

<div class="tab" data-index="0" onclick="window.open('https://www.example.com');">Forums</div>

要使用JavaScript设置这些值，请使用document.getElementById("Your id for your div here").onclick="window.open('https://www.example.com');";

希望这有帮助！

HREF链接菜单栏上的单个选项卡？

1 个答案: