Question

我在html中有一组标签，我想在选中时突出显示。我正在尝试使用jquery来做到这一点。但它似乎没有用。

＆＃13;

$(function () {
    setNavigation();
});

function setNavigation() {
    var path = window.location.pathname;
    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path);

    $(".nav a").each(function () {
        var href = $(this).attr('href');
        if (path.substring(0, href.length) === href) {
            $(this).closest('li').addClass('active');
        }
    });
}

＆＃13;

a {
    color:#000;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a:visited {
    color:#000;
}
.nav {
    padding:10px;
    border:solid 1px #c0c0c0;
    border-radius:5px;
    float:left;
}
.nav li {
    list-style-type:none;
    float:left;
    margin:0 10px;
}
.nav li a {
    text-align:center;
    width:55px;
    float:left;
}
.nav li.active {
    background-color:green;
}
.nav li.active a {
    color:#fff;
    font-weight:bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="nav">
        <li><a href="#tab1">tab1</a>
        </li>
        <li>|</li>
        <li><a href="#tab2">tab2</a>
        </li>
        <li>|</li>
        <li><a href="#tab3">tab3</a>
        </li>
        <li>|</li>
        <li><a href="#tab4">tab4</a>
        </li>
    </ul>

＆＃13;

Answer 1

对于点击事件，这是可行的：

＆＃13;

$(document).on("click", 'ul li', function(){
    $('ul li').removeClass('active');
    $(this).addClass('active');
});

＆＃13;

a {
    color:#000;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a:visited {
    color:#000;
}
.nav {
    padding:10px;
    border:solid 1px #c0c0c0;
    border-radius:5px;
    float:left;
}
.nav li {
    list-style-type:none;
    float:left;
    margin:0 10px;
}
.nav li a {
    text-align:center;
    width:55px;
    float:left;
}
.nav li.active {
    background-color:green;
}
.nav li.active a {
    color:#fff;
    font-weight:bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="nav">
  <li><a href="#tab1">tab1</a>
  </li>
  <li>|</li>
  <li><a href="#tab2">tab2</a>
  </li>
  <li>|</li>
  <li><a href="#tab3">tab3</a>
  </li>
  <li>|</li>
  <li><a href="#tab4">tab4</a>
  </li>
</ul>

＆＃13;

Answer 2

添加一个运算符类，用于定义哪个选项卡处于活动/单击状态。

<强> HTML

<ul class="nav">
    <li><a href="#tab1" class="active">tab1</a>
    </li>
    <li>|</li>
    <li><a href="#tab2">tab2</a>
    </li>
    <li>|</li>
    <li><a href="#tab3">tab3</a>
    </li>
    <li>|</li>
    <li><a href="#tab4">tab4</a>
    </li>
</ul>

在CSS中设置样式，然后在Javascript / jQuery中执行如下所示的点击事件：

$(document).ready(function(){
    $(".nav").on("click", "li", function(){
        $(".active").removeClass("active");
        $(this).addClass("active");
    })
})

http://jsfiddle.net/scriptonic/pgw8qq9a/3/

Answer 3

这是您需要的所有jQuery / javascript：

$('.nav a').click(function() {  // Hook up to the click event on your .nav anchors
    $('.nav li').removeClass('active');  // Clear any existing active <li>'s
    $(this).parent().addClass('active');  // Apply the active class to the <li> parent of the clicked <a>
});

Answer 4

这和另一个人差不多（只是一些人，我本来只是添加了评论，但我没有声望点。实际上是负面的），但对.nav类更具体一点，所以你'不要将事件添加到所有ul li元素，而只添加到.nav类下的元素。

如果你的标签不仅仅是静态的话，你也可以使用on ...

$(".nav li a").click(function() {
  $(".nav li").removeClass("active");                                     
  $(this).parent().addClass("active");
});

http://jsfiddle.net/pgw8qq9a/9/

Answer 5

＆＃13;

$(function () {
    setNavigation();
});

function setNavigation() {
    var path = window.location.pathname;
    path = path.replace(/\/$/, "");
    path = decodeURIComponent(path);

    $(".nav a").each(function () {
        var href = $(this).attr('href');
        if (path.substring(0, href.length) === href) {
            $(this).closest('li').addClass('active');
        }
    });
}

＆＃13;

a {
    color:#000;
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
}
a:visited {
    color:#000;
}
.nav {
    padding:10px;
    border:solid 1px #c0c0c0;
    border-radius:5px;
    float:left;
}
.nav li {
    list-style-type:none;
    float:left;
    margin:0 10px;
}
.nav li a {
    text-align:center;
    width:55px;
    float:left;
}
.nav li.active {
    background-color:green;
}
.nav li.active a {
    color:#fff;
    font-weight:bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul class="nav">
        <li><a href="#tab1">tab1</a>
        </li>
        <li>|</li>
        <li><a href="#tab2">tab2</a>
        </li>
        <li>|</li>
        <li><a href="#tab3">tab3</a>
        </li>
        <li>|</li>
        <li><a href="#tab4">tab4</a>
        </li>
    </ul>

＆＃13;

Answer 6

HTML：

<ul class="nav">
    <li><a onclick="add_select(this);" href="#tab1">tab1</a>
    </li>
    <li>|</li>
    <li><a onclick="add_select(this);" href="#tab2">tab2</a>
    </li>
    <li>|</li>
    <li><a onclick="add_select(this);" href="#tab3">tab3</a>
    </li>
    <li>|</li>
    <li><a onclick="add_select(this);" href="#tab4">tab4</a>
    </li>
</ul>

jquery：

function add_select(selected_nav){
    $("ul#nav li a").removeClass("active");
    $(selected_nav).addClass("active");
}

如何突出显示所选标签？

6 个答案: