Jquery删除并向li节点添加活动类并使用preventDefault发出问题

Jquery Removal&amp; 在LI导航上添加“活动”类使用preventDefault,但链接不再</ p>

Jquery删除添加活动类到li节点不工作</ p>

I 知道删除活动类并将活动类添加到li中以突出显示当前页面的导航项应该是非常基本的,但是我无法让它工作。</ p>

我发现 我必须使用e.preventDefault()使其工作,但是当我这样做时,链接不起作用,但突出显示的导航项工作。 如果我删除了preventDefault(),那么它会导航但不会突出显示。 我应该说我的导航系统位于header.php包含文件中。 这就是我所拥有的:</ p>

 &lt; ul class =“myNav”&gt; 
&lt; li&gt;&lt; a href =“index.php”&gt; Home&lt; / a&gt;&lt; / li&gt;
&lt; li&gt;&lt; a href =“portfolio.php”&gt;投资组合&lt; / a&gt;&lt; / li&gt;
&lt; li&gt;&lt; a href =“about.php “&gt;关于&lt; / a&gt;&lt; / li&gt;
&lt; li&gt;&lt; a href =”contact.php“&gt;联系&lt; / a&gt;&lt; / li&gt;
&lt; / ul&gt;
\ n $('。myNav li a')。click(function(e)
{
e.preventDefault();
$('。myNav li')。siblings()。removeClass('active');

$(this).parent()。addClass('active');
// var url = $(this).attr(“href”);
// window.location = url;
} );
</ code> </ pre>

我试图将页面发送到点击的网址,这会加载正确的页面,但它会删除该类! 我想解决这个问题,但我也想了解为什么它不能正常工作。</ p>
</ div>

展开原文

原文

Jquery Removing & Adding 'Active' Class On LI Navigation Works With preventDefault, But Link No Longer

Jquery removing an adding active class to li nodes not working

I know it should be really basic to remove and add the active class to li's in order to highlight the current page's nav item, but I've been unable to get it to work.

I find that I must use e.preventDefault() to make it work, but when I do the link doesn't work but the highlighted nav item works. If I remove the preventDefault() then it navigates but doesn't highlight. I should say that my nav is sitting in a header.php include file. Here's what I have:

<ul class="myNav">
  <li><a href="index.php">Home</a></li>
  <li><a href="portfolio.php">Portfolio</a></li>
  <li><a href="about.php">About</a></li>
  <li><a href="contact.php">Contact</a></li>
</ul>

$('.myNav li a').click(function (e)
{
  e.preventDefault();
$('.myNav li').siblings().removeClass('active');
$(this).parent().addClass('active');
//var url = $(this).attr("href"); 
//window.location = url;
});

I tried to send the page to the clicked url and this loads the correct page, but it removes the class! I'd like to solve this, but I'd also like to understand why it isn't working correctly.

dongyong1897
dongyong1897 我知道了。因此,当它转到下一页时,对class属性的更改将丢失,并且默认会再次加载。我看到下一页的所有帖子都是使用jquery将类更改为活动的导航链接。如果他们在导航到新页面时失去了他们的课程,那就好奇怪了。那将是毫无意义的。所以,我认为这与它在标题包含文件中的事实有关,但我不确定为什么会出现这种情况,或者是因为我正在向li添加一个类而不是到一个节点?
8 年多之前 回复
dqwp81696
dqwp81696 你真的希望链接工作,转到另一个页面,然后记住你的功能,并突出显示新页面上的内容。如果是这样你就误解了!
8 年多之前 回复
dongshanxiao7328
dongshanxiao7328 如果您单击链接并转到新页面,则通过javascript在上一页上所做的任何更改都不会生效。
8 年多之前 回复

5个回答



我最终在PHP中这样做:</ p>

 &lt;?php

//获取要在
$ path = $ _SERVER ['PHP_SELF']中使用的当前页面名称;
$ page = basename($ path);
$ page = basename($ path,'。php) ');
?&gt;

&lt; li&lt;?php if($ page =='index')echo'class =“active”';?&gt;&gt;&lt; a href =“index。 php“&gt;主页&lt; / a&gt;&lt; / li&gt;
&lt; li&lt;?php if($ page =='portfolio')echo”class ='active'“; ?&GT; &gt;&lt; a href =“portfolio.php”&gt;投资组合&lt; / a&gt;&lt; / li&gt;
&lt; li&lt;?php if($ page =='about')echo'class =“active” “; ?&GT; &gt;&lt; a href =“about.php”&gt;关于&lt; / a&gt;&lt; / li&gt;
&lt; li&lt;?php if($ page =='contact')echo'class =“active” “; ?&GT; &gt;&lt; a href =“contact.php”&gt;联系&lt; / a&gt;&lt; / li&gt;
</ code> </ pre>
</ div>

展开原文

原文

I ended up doing it in PHP like this:

<?php
//grab the current page name to use in the
$path = $_SERVER['PHP_SELF'];
$page = basename($path);
$page = basename($path, '.php');
?>

        <li<?php if ($page == 'index') echo 'class="active"';?>><a href="index.php">Home</a></li>
    <li <?php if ($page == 'portfolio') echo "class='active'"; ?> ><a href="portfolio.php">Portfolio</a></li>
    <li <?php if ($page == 'about') echo 'class="active"'; ?> ><a href="about.php">About</a></li>
    <li <?php if ($page == 'contact') echo 'class="active"'; ?> ><a href="contact.php">Contact</a></li>

douyong5825
douyong5825 这对我有用。
接近 6 年之前 回复



我恐怕你不能同时使用来实现高亮显示和重定向到页面</ code> jQuery的。 您最好尝试将类 active </ code>添加到页面中的相应 li </ code>,例如在 index.php </ code>页面中添加此行</ p> \ n

 &lt; li class =“active”&gt;&lt; a href =“index.php”&gt; Home&lt; / a&gt;&lt; / li&gt; 
</ code> </ pre >

因为只能使用 jQuery </ code>来保留菜单的状态。 如果页面的这个菜单部分是一个单独的文件,如 header.php </ code>,那么你必须检测哪一个是当前页面。 并且可以轻松检测php中的当前页面并将 class =“active”</ code>添加到相应的 li </ code>以突出显示该内容。</ p>
</ div>

展开原文

原文

I am afraid you can't achieve both highlighting and redirecting to the page at the same time using only jQuery. You should better try to add class active to respective li in your pages for example in index.php page add this line

  <li class="active"><a href="index.php">Home</a></li>

Because you cant preserve the state of menus using only jQuery. If this menu section of your page is in a seperate file like header.php then you have to detect which one is the current page. And can easily detect current page in php and add class="active" to corresponding li to highlight that.



您必须通过检测当前网址并将其与导航中节点的网址进行比较,在PHP中执行此操作。 看看这个:如何让当前页面完整 Windows / IIS服务器上的URL? </ p>
</ div>

展开原文

原文

You have to do this in PHP by detecting the current url and comparing that the the url of the nodes in your navigation. Check this out: How can I get the current page's full URL on a Windows/IIS server?

dougu3988
dougu3988 我同意你不一定要在服务器上这样做,但鉴于JS可以在客户端上关闭,在服务器上执行它似乎是最好的选择,除非你出于某种原因有一个纯静态页面。
8 年多之前 回复
dongwusang0314
dongwusang0314 看起来如果您不想使用客户端存储,则必须在任何一种情况下获取URL。
8 年多之前 回复
duannian7116
duannian7116 是的,在服务器上执行它是更好的,但没有“必须使用PHP”,如果我的服务器运行node.js,我可以在javascript中执行吗? 重点是,有很多方法可以做到这一点,你不必使用PHP,只需将列表作为菜单,并在HTML中为每个页面上的活动列表元素添加一个类要容易得多 URL和摆弄$ _SERVER变量等。
8 年多之前 回复
duanfan8699
duanfan8699 是的,你可以在js中获取url,如果用户比PHP更熟悉JS,那么这是一个非常有效的选项。 但它在PHP中更好,因为JS可以被禁用,并且在页面开始加载和JS运行之间会有一秒钟的间隔。 更不用说创建在PHP的页面生命周期中不会改变而不是JS的html是更好的做法。
8 年多之前 回复
dsjswclzh40259075
dsjswclzh40259075 adeneo,是的,你真的不需要url,因为你知道哪个文件被请求了,只需要根据请求的php文件来改变标记。 我想这就是快乐所暗示的,也是我所指的。
8 年多之前 回复
dotwc62080
dotwc62080 - 同意,但你仍然没有使用PHP,有几种方法可以做到这一点,而常规HTML,只是添加一个类,是最容易的,它实际上与PHP无关,即使文件也是如此 在哪里被称为index.php并通过PHP解析器运行。 给出的答案是获取页面的URL并将其与导航进行比较,难道我们不能轻易地在JS中这样做吗?
8 年多之前 回复
dongxiangqian1855
dongxiangqian1855 Joy的答案使用PHP
8 年多之前 回复
dsi37923
dsi37923 Adeneo,处理这个的最好方法是在服务器端。 Cookie不可靠,可以删除,所有浏览器都不支持本地存储。
8 年多之前 回复
douye6812
douye6812 实际上你不需要做任何事情,有cookie和本地存储可以完全没有问题处理它,如果它是一个常规的HTML页面,@ Joy的答案将工作得很好,不需要PHP。
8 年多之前 回复
dongzhuang1923
dongzhuang1923 这个:php.net/manual/en/reserved.variables.server.php
8 年多之前 回复



当您离开页面时,无论您在javascript中执行的操作都将丢失。 唯一的办法是让你的服务器程序设置'active'标志,可能是通过向链接添加查询参数,或者通过检查程序的url </ p>
</ div>

展开原文

原文

when you navigate out of the page, whatever you did in javascript will be lost. Only way would be for your server program to set the 'active' flag, maybe by adding a query parameter to the link, or by checking the program's url

douchibu7040
douchibu7040 没有理由使用查询参数,因为您可以访问PHP中的URL。
8 年多之前 回复



  var link = document.location.href.split('/')。slice(-1);  //检索页面名称
$('#menuInner li a.active')。removeClass('active'); //删除类'active'
$('#menuInner li a [href $ =“'+ link +'”]')。parent()。addClass('active'); //并将其添加到匹配的\ n </ code> </ pre>
</ div>

展开原文

原文

var link = document.location.href.split('/').slice(-1);   // retrieve page name
$('#menuInner li a.active').removeClass('active');        // remove class 'active'
$('#menuInner li a[href$="'+link+'"]').parent().addClass('active');// and add it to a matching 

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问