时间戳

首页 > 解决方案 > 如何从wordpress中的url调用特定部分

javascript - 如何从wordpress中的url调用特定部分

问题描述

我正在构建一个具有类似选项卡选项的网站页面。我已经使用 elementor 的按钮和部分创建。在按钮和部分上添加了不同的 ID，并且每个按钮的 onclick 单击一个部分出现。这很完美。

现在我也需要这些部分来浏览导航栏。为此，我需要为这些特定部分添加 url。如果我想从导航中获取 section2。页面重新加载，网址更改并出现该部分。

这是这里的实时页面。

点击查看

这是我用来在每个按钮上显示每个部分的 javascript 代码。

var divs
var btn11 = document.getElementById("btn11");
var btn22 = document.getElementById("btn22");
var btn33 = document.getElementById("btn33");
var btn44 = document.getElementById("btn44");
var btn55 = document.getElementById("btn55");
var btn66 = document.getElementById("btn66");
var btn77 = document.getElementById("btn77");
var btn88 = document.getElementById("btn88");
var btn99 = document.getElementById("btn99");
var btn1010 = document.getElementById("btn1010");
var sect11 = false
var sect22 = false
var sect33 = false
var sect44 = false
var sect55 = false
var sect66 = false
var sect77 = false
var sect88 = false
var sect99 = false
var sect1010 = false


// toggleDivs("sect11");
// var visionBtn = document.getElementsByClassName("ekit-double-btn-two");

var visionBtn = document.querySelector('#next-btn');
// var visionBtn = document.querySelector('.ekit-double-btn-two');
// ekit-double-btn-two

visionBtn.onclick = function(e) {
  e.preventDefault();
  if (sect11) {
    toggleDivs('sect22')
  } else if (sect22) {
    toggleDivs('sect33')
  } else if (sect33) {
    toggleDivs('sect44')
  } else if (sect44) {
    toggleDivs('sect55')
  } else if (sect55) {
    toggleDivs('sect66')
  } else if (sect66) {
    toggleDivs('sect77')
  } else if (sect77) {
    toggleDivs('sect88')
  } else if (sect88) {
    toggleDivs('sect99')
  } else if (sect99) {
    toggleDivs('sect1010')
  }
};


btn11.onclick = function(event) {
  event.preventDefault();
  toggleDivs("sect11");
};
btn22.onclick = function(event) {
  event.preventDefault();
  toggleDivs("sect22");
};
btn33.onclick = function(event) {
  event.preventDefault();
  toggleDivs("sect33");
};
btn44.onclick = function(event) {
  event.preventDefault();
  toggleDivs("sect44");
};
btn55.onclick = function(event) {
  event.preventDefault();
  toggleDivs("sect55");
};
btn66.onclick = function(event) {
  event.preventDefault();
  toggleDivs("sect66");
};
btn77.onclick = function(event) {
  event.preventDefault();
  toggleDivs("sect77");
};
btn88.onclick = function(event) {
  event.preventDefault();
  toggleDivs("sect88");
};
btn99.onclick = function(event) {
  event.preventDefault();
  toggleDivs("sect99");
};
btn1010.onclick = function(event) {
  event.preventDefault();
  toggleDivs("sect1010");
};


function toggleDivs(s) {
  //reset
  document.getElementById("sect11").classList.remove("shown");
  document.getElementById("sect22").classList.remove("shown");
  document.getElementById("sect33").classList.remove("shown");
  document.getElementById("sect44").classList.remove("shown");
  document.getElementById("sect55").classList.remove("shown");
  document.getElementById("sect66").classList.remove("shown");
  document.getElementById("sect77").classList.remove("shown");
  document.getElementById("sect88").classList.remove("shown");
  document.getElementById("sect99").classList.remove("shown");
  document.getElementById("sect1010").classList.remove("shown");
  //show
  document.getElementById(s).classList.add("shown");
  if (s === 'sect11') {
    sect11 = true
    sect22 = false
    sect33 = false
    sect44 = false
    sect55 = false
    sect66 = false
    sect77 = false
    sect88 = false
    sect99 = false
    sect1010 = false
    document.getElementById("next-btn").innerHTML = "Vision";
  } else if (s === 'sect22') {
    sect11 = false
    sect22 = true
    sect33 = false
    sect44 = false
    sect55 = false
    sect66 = false
    sect77 = false
    sect88 = false
    sect99 = false
    sect1010 = false
    document.getElementById("next-btn").innerHTML = "Misson";
  } else if (s === 'sect33') {
    sect11 = false
    sect22 = false
    sect33 = true
    sect44 = false
    sect55 = false
    sect66 = false
    sect77 = false
    sect88 = false
    sect99 = false
    sect1010 = false
    document.getElementById("next-btn").innerHTML = "Vision";
  } else if (s === 'sect44') {
    sect11 = false
    sect22 = false
    sect33 = false
    sect44 = true
    sect55 = false
    sect66 = false
    sect77 = false
    sect88 = false
    sect99 = false
    sect1010 = false
    document.getElementById("next-btn").innerHTML = "section 4";
  } else if (s === 'sect55') {
    sect11 = false
    sect22 = false
    sect33 = false
    sect44 = false
    sect55 = true
    sect66 = false
    sect77 = false
    sect88 = false
    sect99 = false
    sect1010 = false
    document.getElementById("next-btn").innerHTML = "section 5";
  } else if (s === 'sect66') {
    sect11 = false
    sect22 = false
    sect33 = false
    sect44 = false
    sect55 = false
    sect66 = true
    sect77 = false
    sect88 = false
    sect99 = false
    sect1010 = false
    document.getElementById("next-btn").innerHTML = "section 6";
  } else if (s === 'sect77') {
    sect11 = false
    sect22 = false
    sect33 = false
    sect44 = false
    sect55 = false
    sect66 = false
    sect77 = true
    sect88 = false
    sect99 = false
    sect1010 = false
    document.getElementById("next-btn").innerHTML = "section 7";
  } else if (s === 'sect88') {
    sect11 = false
    sect22 = false
    sect33 = false
    sect44 = false
    sect55 = false
    sect66 = false
    sect77 = false
    sect88 = true
    sect99 = false
    sect1010 = false
    document.getElementById("next-btn").innerHTML = "section 8";
  } else if (s === 'sect99') {
    sect11 = false
    sect22 = false
    sect33 = false
    sect44 = false
    sect55 = false
    sect66 = false
    sect77 = false
    sect88 = false
    sect99 = true
    sect1010 = false
    document.getElementById("next-btn").innerHTML = "section 9";
  } else if (s === 'sect1010') {
    sect11 = false
    sect22 = false
    sect33 = false
    sect44 = false
    sect55 = false
    sect66 = false
    sect77 = false
    sect88 = false
    sect99 = false
    sect1010 = true
    document.getElementById("next-btn").innerHTML = "section 10";
  }
}

//force button1 state initialise, if required
//btn1.focus();
//btn1.click();
.elementor-editor-active .hidden {
  display: block;
}

.hidden {
  display: none;
}

.shown {
  display: block !important;
}

标签： javascriptjquerycsswordpressurl

解决方案

建议

  1. 将要显示为数据属性的事物的 ID 添加到按钮

    id="btn11" data-id="sect11" class="toggleButton"

  2. 例如，从最近的容器委托

    const container = document.querySelector('.elementor-container');
const toggleButtons = [...container.querySelectorAll('toggleButton')];
container.addEventListener('click',function(e) {
  const tgt = e.target.closest('.elementor-widget-wrap').querySelector("[data-id]"); // find the button of the clicked widget
  if (tgt && tgt.classList.contains('toggleButton')) {
    const idx = 0;
    toggleButtons.forEach((btn,i) => {
      const div = document.getElementById('#'+btn.dataset.id).classList.toggle('shown',btn===tgt)          if (btn === tgt) idx = i;
    })
    // not sure on this code, but have a go
    if (idx < toggleButtons.length-1)document.getElementById("next-btn").textContent = toggleButtons[idx+1].textContent;
  }
})

推荐阅读