内容的栏目 * @param int $category 0列表 1频道 2单页 3外链 * @return array */ function category_list($forumlist, $model = 0, $display = 0, $category = 0) { if (empty($forumlist)) return NULL; static $cache = array(); $key = $model . '-' . $display . '-' . $category; if (isset($cache[$key])) return $cache[$key]; if ($display) { foreach ($forumlist as $k => $val) { if (1 == $val['display'] && 1 == $val['type'] && $val['category'] == $category) { $cache[$key][$k] = $val; } } } else { foreach ($forumlist as $k => $val) { if (1 == $val['type'] && $val['category'] == $category) { $cache[$key][$k] = $val; } } } return empty($cache[$key]) ? NULL : $cache[$key]; } /** * @param $forumlist 所有版块列表 不分模型 * @param int $display 0全部CMS栏目 1在首页和频道显示内容的栏目 * @param int $category 0列表 1频道 2单页 3外链 * @return array */ function category_list_show($forumlist, $display = 0, $category = 0) { if (empty($forumlist)) return NULL; static $cache = array(); $key = $display . '-' . $category; if (isset($cache[$key])) return $cache[$key]; if ($display) { foreach ($forumlist as $k => $val) { if (1 == $val['display'] && 1 == $val['type'] && $val['category'] == $category) { $cache[$key][$k] = $val; } } } else { foreach ($forumlist as $k => $val) { if (1 == $val['type'] && $val['category'] == $category) { $cache[$key][$k] = $val; } } } return empty($cache[$key]) ? NULL : $cache[$key]; } /** * @param $forumlist 所有版块列表 * @return mixed BBS栏目数据(仅列表) 尚未开放bbs频道功能 */ function forum_list($forumlist) { if (empty($forumlist)) return array(); static $cache = array(); if (isset($cache['bbs_forum_list'])) return $cache['bbs_forum_list']; $cache['bbs_forum_list'] = array(); foreach ($forumlist as $_fid => $_forum) { if ($_forum['type']) continue; $cache['bbs_forum_list'][$_fid] = $_forum; } return $cache['bbs_forum_list']; } // 导航显示的版块 function nav_list($forumlist) { if (empty($forumlist)) return NULL; static $cache = array(); if (isset($cache['nav_list'])) return $cache['nav_list']; foreach ($forumlist as $fid => $forum) { if (0 == $forum['nav_display']) { unset($forumlist[$fid]); } } return $cache['nav_list'] = $forumlist; } ?>javascript - how to determine which anchor in li element is active - Stack Overflow

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

    最新消息：雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客
    你的位置： 首页>programmer>javascript - how to determine which anchor in li element is active - Stack Overflow

    javascript - how to determine which anchor in li element is active - Stack Overflow

    programmeradmin0浏览0评论

    I have this code below: 

    <li>
  <a href="<?php echo base_url()?>home/promos/call" class="promo-call active-call"></a>
</li>
<li>
  <a href="<?php echo base_url()?>home/promos/text" class="promo-text"></a>
</li>
<li>
  <a href="<?php echo base_url()?>home/promos/data" class="promo-data"></a>
</li>
<li>
  <a href="<?php echo base_url()?>home/promos/bo" class="promo-bo"></a> 
</li>
<li>
  <a href="<?php echo base_url()?>home/promos/recent" class="promo-recent"></a>
</li>

    What I want to do is when the user click the class promo-text it will append an active-text in the class property

    E.g: 

    <a class="promo-text active-text></a>

    and will add this css style: background:url(../images/call_icon_0.png) 0 -72px no-repeat!important;

    Of course i need remove the active in the other class.

    I have this code below: 

    <li>
  <a href="<?php echo base_url()?>home/promos/call" class="promo-call active-call"></a>
</li>
<li>
  <a href="<?php echo base_url()?>home/promos/text" class="promo-text"></a>
</li>
<li>
  <a href="<?php echo base_url()?>home/promos/data" class="promo-data"></a>
</li>
<li>
  <a href="<?php echo base_url()?>home/promos/bo" class="promo-bo"></a> 
</li>
<li>
  <a href="<?php echo base_url()?>home/promos/recent" class="promo-recent"></a>
</li>

    What I want to do is when the user click the class promo-text it will append an active-text in the class property

    E.g: 

    <a class="promo-text active-text></a>

    and will add this css style: background:url(../images/call_icon_0.png) 0 -72px no-repeat!important;

    Of course i need remove the active in the other class.

    • javascript
    • jquery
    • css
    • jquery-mobile
    Share Improve this question edited Mar 20, 2012 at 9:16 Manse 38.1k11 gold badges86 silver badges111 bronze badges asked Mar 20, 2012 at 7:54 Wondering CoderWondering Coder 1,70211 gold badges31 silver badges51 bronze badges 7
    • Would you mind using Javascript/JQuery? – MD Sayem Ahmed Commented Mar 20, 2012 at 7:56
    • You should use Javascript here – Config Commented Mar 20, 2012 at 8:00
    • @SayemAhmed yup. Just don't know how to apply it in my case. – Wondering Coder Commented Mar 20, 2012 at 8:21
    • 1 @Gordon sorry, edited the tags – Wondering Coder Commented Mar 20, 2012 at 8:22
    • @WonderingCoder: See the answer below. – MD Sayem Ahmed Commented Mar 20, 2012 at 8:25
     |  Show 2 more ments

    7 Answers 7

    Reset to default 4

    If you don't mind using Javascript + Jquery + CSS, try the following.

    First create a CSS Class like this - 

    .active-text
{
    background: url(../images/call_icon_0.png) 0 -72px no-repeat;
}

    Then use the following JQuery code - 

    $(document).ready(function()
{
    $("li a").click(function()
    {
        $("li a.active-text").removeClass("active-text");
        $(this).addClass("active-text");
    });
});

    jsFiddle demo.

    To add any specific CSS style to an element, use the css() function - 

    $(this).css("color", "red");

    This will dynamically add color:red CSS style to the selected element. You can add any CSS rule in this way.

    Using javascript & jquery you could use http://api.jquery./click/:

    $('li a').click(function(){
    // remove all classes
    $('li a').removeClass('active-text');

    // add class to the selected element
    $(this).addClass('active-text);
});

    Instead of using a separate class, you can use the pseudo class a:active 

    a.promo-text {
 /* some style */
}
a.promo-text:active {
 background:url(../images/call_icon_0.png) 0 -72px no-repeat!important;
}

    if you have multiple backgrounds for each link,

    a.promo-text:active {
 /* text_icon background */
}
a.promo-call:active {
 /* call_icon background */
}


a.promo-recent:active {
 /* recent_icon background */
}

    and so on

    Set it manually since it will redirect to another page after clicking.

    For example in call page, this will be the code:

        <li>
        <a href="<?php echo base_url()?>home/promos/call" class="promo-call active-text active-call"></a>
    </li>
    <li>
        <a href="<?php echo base_url()?>home/promos/text" class="promo-text"></a>
    </li>
    <li>
        <a href="<?php echo base_url()?>home/promos/data" class="promo-data"></a>
    </li>
    <li>
        <a href="<?php echo base_url()?>home/promos/bo" class="promo-bo"></a>
    </li>
    <li>
        <a href="<?php echo base_url()?>home/promos/recent" class="promo-recent"></a>
    </li>

    In text page:

        <li>
        <a href="<?php echo base_url()?>home/promos/call" class="promo-call active-call"></a>
    </li>
    <li>
        <a href="<?php echo base_url()?>home/promos/text" class="promo-text active-text"></a>
    </li>
    <li>
        <a href="<?php echo base_url()?>home/promos/data" class="promo-data"></a>
    </li>
    <li>
        <a href="<?php echo base_url()?>home/promos/bo" class="promo-bo"></a>
    </li>
    <li>
        <a href="<?php echo base_url()?>home/promos/recent" class="promo-recent"></a>
    </li>

    Using pure CSS you won't be able to set a new class upon a click, you would need Javascript for that. (see xylar's response for an example)

    If you are interested in changing the style upon hover, i.e. when the user moves his mouse over a list item, you could use the li:hover CSS directive.

    $(document).ready(function(){
  $("li a").click(function(){
     $(this).addClass("class name here").parent().siblings().children("a").removeClass("to remove class name here");
  });
});

    Should get you there.

    If I'm right, then you can't add inline style with !important option, therefore you should create separate class or id for, that case ( class would be better I supose ). Also. You may have more than one list on the page, therefore it is better to work with one specific, so you take closest to your li, but if your link will go somewhere ( not on page action ), then it will reload and there is no point in JavaScript. Better to add with PHP then. Or if you parse it with Javascript somehow or do Ajax call, then it is fine (probably).

    <style type="text/css">
.active-text {
    background: url(../images/call_icon_0.png) 0 -72px no-repeat !important;
}
</style>

<script type="text/javascript">
$(function()
{
    $('li a').click(function(){
        var $this = $(this);

        $this.closest('ul').find( 'li a' ).removeClass('active-text');

        $this.addClass('active-text);
    });
});
</script>

    与本文相关的文章

    发布评论

    评论列表(0)

    1. 暂无评论