修改一个 <p> 列表中的元素，使用jQuery

Question

我回到这里是因为我无法做我想做的事。 我有一个导航菜单，在一个“ 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/

谢谢你的帮助 ！

Answer 1

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

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

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

Answer 2

哦，谢谢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