Question

我要回到这里因为我无法做我想做的事。我有一个导航菜单，其中一个'ul'中有三个'li'，每个都包含

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

我尝试修改

元素的字符串以添加短划线“ - ”或点•以区分哪个是活动菜单但是我对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

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

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

其次，它应该是＆＃34;强调＆＃34;而不是＆＃34;下划线＆＃34; 您还可以尝试向活动元素添加/删除临时类，以将其与其他元素区分开来。

Answer 2

哦，谢谢Kamlesh Kushwaha。虽然下划线没有消失，但它确实奏效了。但无论如何，我得到了更多“这个”属性。我用原始剧本制作了这个：

$("#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

使用jQuery修改列表中的<p>元素</p>

2 个答案: