Question

我正在尝试创建一个用于在两个div之间切换的jQuery函数，但我不知道如何使“主动”链接加下划线。喜欢与所选div的链接。

以下是代码：

JS：

function toggleDiv(target) {

    var div = document.getElementById('wrapper').getElementsByTagName("div");

    if (target == 1) {
        div[0].style.display = 'none';
        div[1].style.display = 'block';
    } else {
        div[0].style.display = 'block';
        div[1].style.display = 'none';
    }

};

HTML：

<div id="button" onclick="toggleDiv(0)" style="padding-right: ;">
  <p align="center">PSYCHOLOGIE A PSYCHOTERAPIE</p>
</div>

<div id="button2" onclick="toggleDiv(1)" style="padding-left: ;">
  <p align="center">PSYCHOLOGIE PRÁCE</p>
</div>

Answer 1

为什么不添加text-decoration:underline？

div[active].style.textDecoration = "underline";
div[inactive].style.textDecoration = "none";

使用正确的替换替换active和inactive。

我也会建议一个更有活力的解决方案，因为你的解决方案很僵硬。试试这个：

$("div").click(function() {
  $("div").removeClass("active");
  $(this).addClass("active");
});

div {
  display: inline-block;
  background-color: #222222;
  border-radius: 2px;
  padding: 5px 10px;
  margin: 5px;
  color: #eeeeee;
  box-sizing: border-box;
  transition: all .2s;
}
div.active {
  text-decoration: underline;
  background-color: #2222ee;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>Click</div>
<div>On</div>
<div>One</div>
<div>Of</div>
<div>These</div>

Answer 2

.active {
    border-bottom: solid;
}

将此css添加到您的页面，您可以将此类应用于任何元素，它将具有下划线效果

Answer 3

试试这个：

function toggleDiv(target) {

var div = document.getElementById('wrapper').getElementsByTagName("div");

div[target].css('textDecoration ', 'underline')
if (target == 1) {
    div[0].style.display = 'none';
    div[1].style.display = 'block';
} else {
    div[0].style.display = 'block';
    div[1].style.display = 'none';
}

};

Answer 4

我建议使用“活动”类，并在开头，将此类添加到其中一个div。当一个动作发生时，做这样的事情：

$(document).ready(function(){
    $("div").click(function(){
        $("div").toggleClass("active);
    });
});

这样，活动变为非活动状态，非活动状态变为活动状态。

<div class="active" style="padding-right: ;">
<p align="center">PSYCHOLOGIE A PSYCHOTERAPIE</p>
</div>

<div style="padding-left: ;">
<p align="center">PSYCHOLOGIE PRÁCE</p>
</div>

将其与一些css代码混合使用：

.active{
  text-decoration:underline;
}

Answer 5

这样的东西？

＆＃13;

$(document).on('click', '.my-button', function(e) {
  $(this).addClass('div-underline').siblings('.my-button').removeClass('div-underline');;
});

＆＃13;

.my-button {  }
.div-underline { text-decoration: underline; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="my-button"><p align="center">PSYCHOLOGIE A PSYCHOTERAPIE</p></div>
<div class="my-button"><p align="center">PSYCHOLOGIE PRÁCE</p></div>

＆＃13;

或者这个？

＆＃13;

$(document).on('click', '.my-button', function(e) {
  $(this).addClass('div-underline').siblings('.my-button').removeClass('div-underline');;
});

＆＃13;

.my-button { padding-bottom: 1px; }
.div-underline { border-bottom: 1px solid; padding-bottom: 0; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="my-button"><p align="center">PSYCHOLOGIE A PSYCHOTERAPIE</p></div>
<div class="my-button"><p align="center">PSYCHOLOGIE PRÁCE</p></div>

＆＃13;

还是更喜欢这个？

＆＃13;

$(document).on('click', '.my-button', function(e) {
  $(this).addClass('div-underline').siblings('.my-button').removeClass('div-underline');;
});

＆＃13;

.my-button p { padding-bottom: 1px; }
.div-underline p { padding-bottom: 0; border-bottom: 1px solid; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="my-button"><p align="center">PSYCHOLOGIE A PSYCHOTERAPIE</p></div>
<div class="my-button"><p align="center">PSYCHOLOGIE PRÁCE</p></div>

＆＃13;

Answer 6

这是我的答案：

<html>
<head>
    <meta charset="UTF-8">
    <style>
        #wrapper {
            width:200px;
            height:150px;
            border:solid 2px black;
        }
        #wrapper .active{
            background-color:black;
            color:lightblue;
        }
    </style>
    <script type="text/javascript">
        var activeControl = new Object();

        function setMyActiveControl(e){
            if (e != activeControl){
                removeActive();
                e.className = 'active';
                activeControl = e;
            }
        }
        function removeActive(){
            var div = document.getElementById('wrapper').getElementsByTagName("div");
            for (i in div){
                if (div.item(i).className == 'active') div[i].className = '';
            }

        }
    </script>
</head>

<body id=wrapper>
    <div id=button1 onclick="setMyActiveControl(this);"><p align="center">button 1</p></div>
    <div id=button2 onclick="setMyActiveControl(this);"><p align="center">button 2</p></div>
    <div id=button3 onclick="setMyActiveControl(this);"><p align="center">button 3</p></div>
    <div id=button4 onclick="setMyActiveControl(this);" class='active'><p align="center">button 4</p></div>
</body>

需要注意的事项：

在代码中

，您可以访问以下元素：

div[0]

相反，请使用：

div.item(0)

另外，当您访问div上的样式对象时，您正在更改内联css。问题是，您没有在内联样式中声明显示，因此未定义或在级联中的其他位置定义。这可能会导致代码以这种方式执行各种问题。正如其他人已经指出的那样，最好在样式表中使用一个类。

我希望这会有所帮助。

如何强调活跃的div

6 个答案: