Question

我正在使用JavaScript，Java Spring MVC和CSS html创建网页。我对这种编码非常陌生，因此非常感谢您的帮助。基本上，我想用表示“ ...”的按钮替换表示为“ ...”的超链接。当用户在输入框中搜索时，结果列表会显示在下面。 “ ...”链接将他们带回了一步，这就是我的目的要替换为按钮。

这是我的代码：

display=display+"<a href='javascript:exploreThis(\" "+content.pathParent+"\")'>...</a>";
display=display+"<br>";

HTML：

<form name="formExplorer" id="formExplorerId" submit="listPath()">
Path: <br /> <input type="text" name="path" id="explorerPathId">
<button onclick="undoLine(counter)"> Yes</button>                       
</form>
<div id="explorerContentAreaId"></div>

如果需要更多信息，请告诉我。

Answer 1

使用style.display隐藏（表示import React from 'react'; import { RequestCloseModal } from 'HOC/connectModals'; import { compose } from 'redux'; import { Collapse, Modal, ModalHeader, ModalBody, ModalFooter, } from 'reactstrap'; import { ChevronDown, ChevronUp } from 'react-feather'; import PropTypes from 'prop-types'; import Industrie from 'components/Icons/Industrie'; import FinancerContainer from 'backoffice/containers/Financer/FinancerContainer'; import withContainer from 'HOC/withContainer'; import withColor from 'HOC/WithColor'; class FinancerMatchingDetails extends RequestCloseModal { static propTypes = { isOpen: PropTypes.bool, }; constructor(props) { super(props); this.state = { collapse: false, }; } toggle = () => { this.setState({ collapse: !this.state.collapse }); }; render() { const { isOpen } = this.props; return ( <Modal size="xxl" isOpen={isOpen} toggle={this.close}> <ModalHeader toggle={this.close}> <div className="col-md-3"> <h4>Some text</h4> <p>Some text</p> </div> </div> </div> <div> <h4>Some text</h4> {this.state.collapse ? ( <ChevronUp height={20} onClick={this.toggle} /> ) : ( <ChevronDown height={20} onClick={this.toggle} /> )} </div> </ModalBody> <ModalFooter> <div className="container"> <Collapse isOpen={this.state.collapse}> <div className="row"> <div className="col"> <MyIcon color="primary" /> </div> </Collapse> </div> </ModalFooter> </Modal> ); } } export default compose(withContainer(FinancerContainer), withColor)( FinancerMatchingDetails, );或显示（表示none或inline-block）

block

function changeToBack(){
 document.getElementsByClassName("search")[0].style.display="none";
 document.getElementsByClassName("back")[0].style.display="inline-block";
}

.back{
display:none;
}

编辑已添加的代码：

<a class="search" onclick="changeToBack()" href="#">click me to see back</a>
<a href="#" class="back">back</a>

function undoLine(counter){
 document.getElementsByClassName("yes")[0].style.display="none";
 document.getElementsByClassName("back")[0].style.display="inline-block";
}

.back{
display:none;
}

向JavaScript链接添加按钮

1 个答案: