我回到这里是因为我无法做我想做的事。 我有一个导航菜单,在一个“ ul”中有三个“ li”,每个包含一个

元素,带有导航名称。 我已经有了一个脚本,该脚本可隐藏div并显示相应的脚本,其中包含项目缩略图。 我想做的是,通过单击导航元素来区分哪个导航元素处于活动状态。

我尝试修改了字符串

元素以添加破折号“-”或点•来区分哪个是活动菜单,但我对jQuery不太满意,但尚未有效地操纵“ ul”中“ li”中的“ p”。

这是我的html:

<section id="content">

    <p class="section_title"> WORK </p>

    <div id="sections">
        <ul>
            <li class="section" data-grid="grid1"><p class="navigation"     style="cursor : pointer;"> Product</p></li>
            <li class="section" data-grid="grid2"><p class="navigation" style="cursor : pointer;"> Mobility</p></li>
            <li class="section" data-grid="grid3"><p class="navigation" style="cursor : pointer;"> Arcade Sticks</p></li>
            <!-- <li class="section" data-grid="grid4"><p style="cursor : pointer;">. Infography</p></li> -->
        </ul>
    </div>


<!-- PROJECT GRID -->

    <div id="project_grid">

<!-- PRODUCT PROJECTS -->

        <div id="grid1" class="grid">
            <a href="projects/product/jorislaarman.html" style="background:url('assets/img/thumbnails/jorislaarman.png')"></a>
            <a href="projects/product/ptitlouis.html" style="background:url('assets/img/thumbnails/ptitlouis.png')"></a>
            <a href="projects/product/diwel.html" style="background:url('assets/img/thumbnails/diwel.png')"></a>
            <a href="projects/product/wirquin.html" style="background:url('assets/img/thumbnails/wirquin.png')"></a>
            <a href="projects/product/ulna.html" style="background:url('assets/img/thumbnails/ulna.png')"></a>
            <a href="projects/product/envol.html" style="background:url('assets/img/thumbnails/envol.png')"></a>
        </div>

接下来还有其他网格,每个网格都由jQuery操纵,在这里:

$("#project_grid div:not(#grid1)").hide();

$('.section').click(function() {
    $('.grid').hide();
    $('#' + $(this).data('grid')).show();
});

我尝试使用jQuery进行了几项操作,但未更改原始脚本,至少强调了单击的内容

元素,例如:

$('.navigation').click(function(){
$('p').css("text-decoration","underlined");
});

和:

$('p').clicked(function(){
    $(this).css('text-decoration','underlined');
});

但是,这些都不起作用:/我真的无法弄清楚。

我也尝试修改

字符串,带有.append,但是我无法弄清楚以太...

我只想做简单的事情。 在活动的导航部分下划线,或者在单击产品,移动性或街机操纵杆部分之前添加“•”。 当单击另一个时,当然会消失。

http://jsfiddle.net/g32Vm/

谢谢你的帮助 !

===============>>#1 票数:0 已采纳

无需修改CSS属性,更简单的解决方案是$(this)。 $(this)指执行事件的目标/活动元素。

$('.navigation').click(function(){
 $(this).css('text-decoration','underline');
});

其次,它应该是“下划线”而不是“下划线”。您也可以尝试向活动元素添加/删除临时类,以将其与其他元素区分开。

===============>>#2 票数:0

哦,谢谢Kamlesh Kushwaha。 它起作用了,尽管下划线并没有消失。 但是无论如何,我还有更多的“ this”属性。 我用原始脚本制作的:

$("#project_grid div:not(#grid1)").hide();
$("#point3,#point2").hide();

$('.section').click(function() {
    $('.grid').hide();
    $('.point').hide();
    $('#' + $(this).data('grid')).show();
    $('#' + $(this).data('point')).show();
});

我在每个导航部分之前添加了此代码:

<p id="point1" class="point">•</p>
<p id="point2" class="point">•</p>
<p id="point3" class="point">•</p>

这是JS: http : //jsfiddle.net/g32Vm/5/

NOTA:以防万一像我这样的菜鸟落在这里,并想与之做类似的事情

元素,不要忘了添加“ display:inline”作为css值,以避免每个元素都创建新行

标签。

感谢您的帮助:)我有点开始喜欢jQuery:D

  ask by MisBi translate from so

未解决问题?本站智能推荐:

1回复

为什么我使用$(“

某事

”)再添加一个

在jQuery中? [重复]

这个问题已经在这里有了答案: 在<p>标记内嵌套块级元素...是对还是错? 6个答案 我现在在jQuery中遇到了以下代码的奇怪行为(或者是正常现象,我对此一无所知?): 结果是: 为什么要添加最后一个<p></p&g
6回复

如何选择

jQuery中的元素

我已经在下面发布了我的代码,我想做的是选择所单击按钮下方的“ p”元素。 我尝试了几个选择器,但都没有成功... 这是我的HTML: 这是我的jQuery:
1回复

如何使用jQuery查找“ this”元素的下一个“ p”同级?

我们知道我们可以使用以下语法来选择下一个元素。 它选择每个<div>元素旁边的<p> <div>元素。 我想使用此元素选择下一个元素。 例如我试过 但是没有用。 谁能告诉我正确的语法。
2回复

计算一个

使用jQuery

我有一个 我试图计算使用JQUery在此fieldChoices有多少输入框。 请提出一种方法。
4回复

禁用一个

使用jQuery

我试图使此<p>显得已禁用。 实际上,这个<p>标签将通过CSS像按钮一样显示。 如何使此<p>标记在JQuery中显示为已禁用?
4回复

如何在iframe中的p元素中添加click事件(使用jQuery)

如何向iframe中的<p>元素添加click事件(使用jQuery)
4回复

插入

使用jQuery单击按钮时输入中的元素

我遇到了需要更改<button></button>内的HTML的问题。 以下是HTML的相关行: 这就是jQuery: 我所要做的就是无论我按哪个按钮,都显示第一个文本。 我真的需要一些帮助。
3回复

如何使用jquery将元素列表包装(分组)到另一个元素中?

我有以下结构。 我可以将其转换为: 所以任务是将li分组为“行”。 1行总共有3个li,但行号总是不同。 有人知道,怎么做? 谢谢。
1回复

使用jQuery更新div中的p

我正在尝试更新具有.bus_latitude类的p元素的文本。 因此,首先,我找到具有data-* attribute的父div。 检索div后,我尝试找到其最接近的p元素(其类为.bus_latitude ,并将其文本设置为静态内容。 我尝试了许多方法,特别是因为jQuery有多种方
2回复

如何设置一个值

使用Jquery的元素,以及如何使用按钮重置某个对象的所有对象?

所以我得到的是 目标是设置和更新最初由_ char表示的值,该值将由实际值替换。 创建一个类似于Yatzee的游戏,其中得分是出现次数最多和价值最高的骰子的总和(即,如果有2个骰子的得分为6,而没有其他出现次数最多的骰子值,则得分为12) 使用jquery,如何设置这些值