Question

我不确定我的错误在哪里，但这是我的情景...

我在html中有一个无序列表来处理我的主链接栏...

    <ul id="navlist">

 <li><a href="/" id="current">home</a></li>

 <li><a href="#" id="search">search</a></li>

 <li><a href="#" id="users">login</a></li>    

</ul>

我想要做的就是调用每个id并使用jQuery处理每个id并在我的css文件中指定的位置使用它...现在，让我们忽略我的“home”链接......

这是我的内联jquery的片段

$(document).ready(function()
{
    $("a").click(function ()
    {
        $("div#login").slideToggle("fast");
    });
})

现在，无论我指定哪个div，它都会调用...但是它只会使用un-orderd列表调用一个div，如上面html中所述。

我的目标是在点击搜索时调用搜索栏，并在点击登录时调用登录框。

据我所知（noob），我相信使用一个班级，但这就是把我带到这里的原因。

我相信我的错误在我的jquery而不是我的css中，如上所述，当jquery函数调用任一标记时，将显示实例。

非常感谢任何帮助。

提前致谢

shan2on

Answer 1

您可以发布更多HTML和脚本吗？

您可以通过以下方式在点击事件上附加侦听器以进行搜索：

$("#search").click(function()
{
    $("#searchBox").slideToggle();  //Assuming the id of the search box is 'searchBox'
}

Answer 2

如果我理解你的问题，你想在用户点击列表链接时显示一些内容，并且显示的内容与每个链接不同？

如果是这样，你可以这样做：

HTML（此处未进行任何更改）

<ul id="navlist">

 <li><a href="/" id="current">home</a></li>

 <li><a href="#" id="search">search</a></li>

 <li><a href="#" id="users">login</a></li>    

</ul>

SCRIPT（已更改）

$(document).ready(function() {
  $("a").click(function () {
    var Id_to_Class = $(this).attr("id");
    $("div." + Id_to_Class).slideToggle("fast");
  });
});

当您单击元素“a”时，这样的脚本将收集它的id值，并将该值作为类调用div！

Ps：它没有经过测试，但应该没问题！如果这是你想要的，你需要测试，请告诉我！ ;）

Answer 3

HTML：

<ul id="navlist">
    <li><a href="/" id="current">home</a></li>
    <li><a href="#search" class="showbox">search</a></li>
    <li><a href="#login" class="showbox">login</a></li>
</ul>
<div id="search" class="box">Content for  id "search" Goes Here</div>
<div id="login" class="box">Content for  id "login" Goes Here</div>

说明：我在相应的href属性中使用搜索栏和登录框的选择器。那些涉及的<a>有一个类名，所以我可以选择它们而不选择其他<a>。我还给了一个共同的类名，所以我可以参考所有这些。

JQUERY：

jQuery(function($) {
    $('a.showbox').click(function() {
        var theBoxToShow = $(this).attr('href'); // Line 1
        $('.box').slideUp().filter(theBoxToShow).slideDown(); // Line 2
        return false; // Line 3
    });
});

说明：此处只有a.showbox参与onclick。第1行获取我想要显示的元素的选择器（搜索栏/登录框）。第2行隐藏所有框，仅过滤与单击的<a>相关的框。第3行，以防止浏览器跳到顶部。

您可以{c} {c} {} display:none来隐藏它们。希望有所帮助。

jquery在有序列表中使用的div标签

3 个答案: