js根据URL设置网站统一导航。

有很多网站的导航都是统一的。不过,为了提高用户体验,当前页面对应导航链接要与其他要栏目有点区别,这样能很好让用户知道当前在哪个页面。

如下图:

为了做这个效果,以往我们都会为不同的页面做对应导航。现在我们通过JS可以实现这个效果。


$(function(){

    setcur();

});



function setcur()
{
url=document.URL;
a=url.split("/");
str=a[(a.length-1)];
    if (str.indexOf("index")>-1)
    {

        $('.menu-m ul li').each(function()
            {
             $(this).removeAttr('id');
             }
        );

        $(".menu-m ul li:eq(0)").attr("id","menu-now");
        return;
    }
    if (str.indexOf("about")>-1)
    {

        $('.menu-m ul li').each(function()
            {
             $(this).removeAttr('id');
             }
        );

        $(".menu-m ul li:eq(1)").attr("id","menu-now");
        return;
    }
    
    
    
    if (str.indexOf("product")>-1)
    {

        $('.menu-m ul li').each(function()
            {
             $(this).removeAttr('id');
             }
        );

        $(".menu-m ul li:eq(2)").attr("id","menu-now");
        return;
    }
    
        if (str.indexOf("pinpai")>-1)
    {

        $('.menu-m ul li').each(function()
            {
             $(this).removeAttr('id');
             }
        );

        $(".menu-m ul li:eq(2)").attr("id","menu-now");
        return;
    }

    
    
    
    if (str.indexOf("news")>-1)
    {

        $('.menu-m ul li').each(function()
            {
             $(this).removeAttr('id');
             }
        );

        $(".menu-m ul li:eq(3)").attr("id","menu-now");
        return;
    }
    

    
    
    
     // alert(str.indexOf("33"));
    if (str.indexOf("baike")>-1)
    {

        $('.menu-m ul li').each(function()
            {
             $(this).removeAttr('id');
             }
        );

        $(".menu-m ul li:eq(4)").attr("id","menu-now");
        return;
    }
    if (str.indexOf("zhaopin")>-1)
    {

        $('.menu-m ul li').each(function()
            {
             $(this).removeAttr('id');
             }
        );

        $(".menu-m ul li:eq(5)").attr("id","menu-now");
        return;
    }
    
    
    
    else
    {

        $('.menu-m ul li').each(function()
            {
             $(this).removeAttr('id');
             }
        );

        $(".menu-m ul li:eq(0)").attr("id","menu-now");
        return;
    }
    
    
    
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: JavaScript 本身不能直接从 URL 下载文件,但可以通过创建一个带有 URL 的链接,在浏览器中模拟用户点击该链接以下载文件。 以下是创建并自动点击下载链接的代码示例: ```javascript function downloadFile(url) { // 创建链接元素 let link = document.createElement('a'); link.href = url; link.download = ''; // 可以设置文件名 // 自动触发点击事件 document.body.appendChild(link); link.click(); document.body.removeChild(link); } ``` 请注意,浏览器通常会阻止自动下载,因为这可能会对用户造成安全风险。此外,该方法还需要服务器正确配置才能正常工作,例如启用跨域访问和正确设置 Content-Disposition 头。 ### 回答2: 在JavaScript中,可以通过创建XMLHttpRequest对象来下载文件。XMLHttpRequest是一个内置对象,可以在浏览器中创建HTTP请求并获取服务器响应。 要根据URL下载文件,可以使用以下步骤: 1. 创建XMLHttpRequest对象:通过调用XMLHttpRequest构造函数来创建一个新的XMLHttpRequest对象。例如: var xhr = new XMLHttpRequest(); 2. 打开连接:使用open()方法打开连接并指定请求方法和URL。例如: xhr.open('GET', 'http://example.com/myfile.txt', true); 第一个参数是请求方法,可以是GET或POST。第二个参数是文件的URL。第三个参数指示是否异步请求。如果设置为true,XMLHttpRequest对象将在后台运行并通过回调函数处理响应。 3. 发送请求:使用send()方法发送请求。如果是GET请求,可以忽略请求正文。例如: xhr.send(); 如果是POST请求,需要在send()方法中包含请求正文。 4. 处理响应:XMLHttpRequest对象将在收到服务器响应后调用回调函数。响应的内容可以通过responseText属性获取,例如: xhr.onload = function() { console.log(xhr.responseText); }; 回调函数可以在xhr.onload事件中设置,也可以使用xhr.onreadystatechange事件来处理响应。xhr.readyState属性指示请求状态,xhr.status属性指示服务器响应代码。 总体上,使用XMLHttpRequest对象可以轻松地从URL下载文件,并在收到响应后对其进行处理。 ### 回答3: JavaScript是一种高级的网页编程语言,可以用于从URL地址上下载文件,不过需要使用XMLHttpRequest对象来实现。 XMLHttpRequest对象是一个内置于Web浏览器中的JavaScript对象,它可以向服务器发送HTTP请求,并接收响应。这意味着它可以通过网页上的URL地址获取文件。 步骤如下: 1.创建一个XMLHttpRequest对象 在JavaScript中,可以使用以下代码创建一个XMLHttpRequest对象: var xhr = new XMLHttpRequest(); 2.设置响应类型 在发送HTTP请求之前,需要设置响应类型。如果要下载的文件是文本文件,则可以设置为"text/plain"。 xhr.responseType = "text/plain"; 3.打开请求 在设置完响应类型后,需要打开请求。为了下载文件,需要使用GET方法发送HTTP请求,并将URL地址放入open()函数中。true参数表示AJAX请求是异步的。 xhr.open("GET", url, true); 4.注册事件监听器 注册一个事件监听器,以便当文件准备好时执行操作。在这个示例中,将在文件下载完成时,使用alert()函数在网页上显示一条消息。 xhr.onload = function() { alert("文件成功下载"); }; 5.发送请求 最后,使用send()方法发送HTTP请求: xhr.send(); 当文件下载完成时,将触发xhr.onload事件,alert()函数将在网页上显示一条消息。 注意:在请求每个文件之后需要清除XMLHttpRequest对象,以避免内存占用问题。代码如下: xhr = null;

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值