Question

我正在尝试显示一个当前隐藏的div和body标签内部。通过使用锚标记属性href更改网址。如下所示---

<a id="ai" href="managevendors" class="tablink" onclick="openCity()">Manage Vendors
</a>
<div class="w3-container city" style="display: none;" id="managevendors">
<h1>hi,how are you</h1>
</div>

当我点击这个锚标签时，我的网址肯定会改变。根据网址，我想显示一个div。我的js代码......

function openCity() {
    if (window.location.hash == "managevendors") {
    $("#managevendors").show();
    }
}

我不知道为什么这不起作用。但是我用不同的方式来代替下面..

<a id="ai" href="#managevendors" class="tablink" onclick="openCity('managevendors')">Manage Vendors
</a>

和js代码.....

function openCity()
{
  if (window.location.hash == "#managevendors") {
    $("#managevendors").show();
    }
}

但是我不想＃唱歌，我怎么能解决它。帮助我体验兄弟们。谢谢你们。

Answer 1

如果您希望导航工作，则必须使用哈希。一旦你这样做，你不需要检查它，你可以只显示部分：

＆＃13;

$("#ai").on("click", openCity);

function openCity() {
  // The only reason this code is running is because the link was clicked.
  // No need to test for it.
  $("#managevendors").show();
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- You have to include the hash in the href for navigation to work -->
<a id="ai" href="#managevendors" class="tablink">Manage Vendors
</a>
<div class="w3-container city" style="display: none;" id="managevendors">
<h1>hi,how are you</h1>
</div>

＆＃13;

Answer 2

我认为这里的问题是你在使用按钮时正在使用锚标记。第一种方法不起作用的原因是当您单击链接时页面刷新。

尝试将<a>更改为<button>

Answer 3

根据我的理解，您最有可能需要带有哈希值的href="#xyz"。这将使客户端逻辑保持活动状态，而无需尝试解决URL并绕道服务器。如果您要捕获该部分，请将其保留在本地。

我建议从HTML中删除onclick处理程序。要捕获链接，您可以使用jQuery来保持HTML＆＃34;清洁＆＃34;。如果您出于某些奇怪的原因必须参考onclick="openCity(this)"，那么您点击的元素将直接传递给openCity。

// vanilla
function openCity(element){
    var href = element.getAttribute('href'), // expecting a hash here
        id = href.substr(1), // remove the hash
        target = document.getElementById(id);

    target.className += " active";
    return false;
}

Scott用jQuery建议：

//$('.tablink').on('click', openCity);
$('.tablink[href^="#"]').on('click', openCity);

然后，可以通过引用所单击元素中的href来使该函数动态化：

function openCity(ev){
    var el = $(ev.currentTarget),
        id = el.prop('href'), // expecting a hash here
        target = $(id);

    // since you're providing both with and without hash, the default behaviour is to follow the link, unless referenced with a hash
    ev.preventDefault();
    target.addClass('active');
}

如果在页面上找不到该ID，则无效。

现在，如果你想使用url作为入口点，请注意这只会在load event =＆gt;上发生。分享链接，有人点击它（附上#xyz）或直接在地址栏中输入。

// 1. bind the event
$(window).load(function(){
    /*loadCity defined here or outside*/

    loadCity();
});

// 2. define what happens
function loadCity(){
    var id = window.location.hash, // expecting a hash here
        target = $(id);

    target.addClass('active');
}

由于此解决方案仅解决元素的状态，因此可以在CSS中创建实际的显示/隐藏部分。你可能已经做过非常简单，或者有动画，过渡等等。

.city { display: none; }
.city.active { display: block; }

如何通过使用href更改URL来调用或显示div？

3 个答案: